Bootstrap popover不在while循环中工作

Question

I'm trying to use the popover element from bootstrap's framework for Javascript/jQuery and it only works with the first one in the while loop. How can I make it work for all of them?

Why is this? Been trying to figure this out for a bit...

<?php
require 'include.php';
session_start();

    $selectBets = $dbc->query("SELECT * FROM `bets` ORDER BY `bid` DESC LIMIT 10");
?>
<style type="text/css">
#hash_text {
    font-size: 3.8px;
}
</style>
<table class="table table-striped table-bordered table-hover">
                <thead>
                  <tr>
                    <th>Bet Number</th>
                    <th>Amount</th>
                    <th>Send Address</th>
                    <th>Time Created</th>
                    <th>Time Expires</th>
                    <th>Chance to Win</th>
                    <th>Payout Multiplier</th>
                    <th>Final Profit</th>
                    <th>Server Hash</th>
                  </tr>
                </thead>
                <tbody>
                <?php while($BetsArray = $selectBets->fetch()) { ?>
                  <tr>
                  <td><?php echo $BetsArray['bid']; ?></td> 
                  <td><?php echo $BetsArray['amount']; ?></td> 
                  <td><?php echo $BetsArray['deposit_address']; ?></td> 
                  <td><?php echo date('m/d/Y - H:i:s', $BetsArray['time_created']); ?></td> 
                  <td><?php echo date('m/d/Y - H:i:s', $BetsArray['time_expires']); ?></td> 
                  <td><?php echo $BetsArray['win_chance']; ?></td> 
                  <td><?php echo $BetsArray['multiplier']; ?></td> 
                  <td><?php echo $BetsArray['profit']; ?></td> 
                  <td><a id="hash" data-container="body" data-toggle="popover" data-placement="right">Click here for Server Hash</a></td>
                  </tr>
                <?php } ?>
                </tbody>
              </table>
              <script type="text/javascript">
              $(function() {
                $('#hash').popover({
                    html: true,
                    placement: 'right',
                    content: '<?php echo '<span id="hash_text">' . hash('sha512', $BetsArray['number'] . '-' . $_SESSION['client_seed']) . '</span>'; ?>'
                });
              });
              </script>

Answer 1

You are creating the popover element by duplicating the ids. Change it to class and see it working.

<a id="hash" data-container="body" data-toggle="popover" data-placement="right">Click here for Server Hash</a>

When you bind to the popover using the id selector $('#hash') it will select only the first element with id that appears in DOM and hence the behavior that you are seeing.

If you want to place a quick fix then you can use attribute selector to select the id like this.

$('[id=hash]').popover({
                    html: true,
                    placement: 'right',
                    content: '<?php echo '<span id="hash_text">' . hash('sha512', $BetsArray['number'] . '-' . $_SESSION['client_seed']) . '</span>'; ?>'
});

But never ever do that