Bootstrap Popover won't change value in while loop

Question

I have this tabel with data of rfid mac tags. These tags I want to show with in popovers and with some extra info when pressing it. But it does not change its value like the table itself does. The popover seems to repeat the first value which it is given. How can I change the value of the popover after each while loop?

<div class="panel panel-default panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">Items inside</h3>
  </div>

  <table class="table table-bordered  text-center">
    <?php
      $result = mysqli_query($con, "SELECT item_tag, item_status FROM item WHERE item_status = 1;") or die(mysql_error());

      $i = 0;
      while ($row = mysqli_fetch_array($result)){
        $i++;
        //if this is first value in row, create new row
        if ($i % 3 == 1) {
          echo "<tr>";
        }
      ?>

      <td>
        <div>
          <span class="btn" id="infoItem" data-toggle="popover"  rel="popover">
            <?php echo $row[0] ?>
          </span>
        </div>
      </td>

      <script>
        $(document).ready(function () {
          $('[data-toggle="popover"]').popover({
            html: true,
            animation: false,
            content: '<?php echo $row[0] ?>',
            placement: "bottom"
          });
        });
      </script>
      <?php
        //if this is third value in row, end row
        if ($i % 3 == 0) {
          echo "</tr>";
        }
      }
      //if the counter is not divisible by 3, we have an open row
      $spacercells = 3 - ($i % 3);
      if ($spacercells < 3) {
        for ($j = 1; $j <= $spacercells; $j++) {
          echo "<td></td>";
        }
        echo "</tr>";
      }
    ?>
  </table>

</div>

It is my first ever to use html/php/mysql/bootstrap application.

Answer 1

If i were you i would take advantage of bootstrap data attribute API. Something like

  <div class="panel panel-default panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">Items inside</h3>
  </div>

  <table class="table table-bordered  text-center">

  <?php
  $result = mysqli_query($con, "SELECT item_tag, item_status FROM item WHERE item_status = 1;") or die(mysql_error());

  $i = 0;
  while ($row = mysqli_fetch_array($result)){
    $i++;
    //if this is first value in row, create new row
    if ($i % 3 == 1) {
      echo "<tr>";
    }
  ?>

      <td>
        <div>
          <span data-placement="bottom" data-content="<?php echo $row[0]; ?>" data-animation="false" data-html="true" class="btn" id="infoItem" data-toggle="popover"  rel="popover">
            <?php echo $row[0]; ?>
          </span>
        </div>
      </td>

  <?php
    //if this is third value in row, end row
    if ($i % 3 == 0) {
      echo "</tr>";
    }
  }

  </table>

</div>


<script type="text/javascript">

        $(document).ready(function () {
          //Init all the popovers with one call
          $('[data-toggle="popover"]').popover('show');

        });

</script>