title: Desired values not displaying after first entry in the table using Javascript and MySQL
body: <p>I am trying to get data from 2 tables in a mysql database. One of which has the id, name, surname, number and gender. The second table has id, product_name and price.</p>
  <p>The first table information gets displayed in a html table with a drop down, that has a edit button.</p>
  <p>The table gets populated with a while loop.</p>
  <p>Once you click edit, a modal open with the name of the person and a drop down with all the products available, once you click on a product then it displays the product price.</p>
  <p>My issue is that it only works with the first entry in the database where i can click on the product and it displays the price, anything after the first entry in the table, it does not want to display the price. Here is my code:</p>
  <p><strong>Table</strong></p>
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Surname&lt;/th&gt;
          &lt;th&gt;Phone Number&lt;/th&gt;
          &lt;th&gt;Gender&lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;?php
  
      $sql = &quot;SELECT * FROM test_table&quot;;
      $result = $db-&gt;query($sql);
      if ($result-&gt;num_rows &gt; 0) {
          // output data of each row
          while ($row = $result-&gt;fetch_assoc()) {
      ?&gt;
  
          &lt;tr&gt;
          &lt;td&gt;&lt;?php echo $row[&quot;name&quot;]; ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php echo $row[&quot;surname&quot;]; ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php echo $row[&quot;phone_number&quot;]; ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php echo $row[&quot;gender&quot;]; ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;ul class=&quot;t-dropdown-list&quot;&gt;
          &lt;a data-toggle=&quot;modal&quot; data-target=&quot;#SetProductCustomer&lt;?= $row[&quot;id&quot;]; ?&gt;&quot;&gt;&lt;li class=&quot;t-dropdown-item&quot;&gt;Edit&lt;/li&gt;&lt;/a&gt;
              &lt;/ul&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
         &lt;div class=&quot;modal fade&quot; id=&quot;SetProductCustomer&lt;?= $row[&quot;id&quot;]; ?&gt;&quot; class=&quot;&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria- labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
           &lt;div class=&quot;modal-content&quot;&gt;
              &lt;a href=&quot;test.php&quot;&gt;&lt;span class=&quot;close&quot;&gt;&amp;times;&lt;/span&gt;&lt;/a&gt;
  
                 &lt;p&gt;&lt;?php echo $row['name']; ?&gt; &lt;/p&gt;
  
                 &lt;select style=&quot;width: 100%;&quot; name=&quot;&quot; id=&quot;product_info&quot; class=&quot;browser-default custom-select-new&quot;&gt;
  
                 &lt;?php
                 $records = mysqli_query($db, &quot;SELECT * FROM products&quot;);    
                    while ($data = mysqli_fetch_array($records)) {                                             
                    echo '&lt;option value=&quot;' . $data['product_name'] . '&quot;
                    data-price=&quot;' . $data['price'] . '&quot;  &gt;'
                    . $data['product_name'] . '&lt;/option&gt;';
                  }
  
                 ?&gt;
  
               &lt;/select&gt;
  
               &lt;input type=&quot;text&quot; name=&quot;price&quot; id=&quot;price&quot;/&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
            &lt;?php
            }
         }
      ?&gt;
  &lt;/table&gt;
  </code></pre>
  <p><strong>SCRIPT TO GET THE PRICE</strong></p>
  <pre><code>     &lt;script&gt;
       var mySelect = document.getElementById(&quot;product_info&quot;);
  
       mySelect.addEventListener(&quot;change&quot;, function() {
        var myNewOption = mySelect.options[mySelect.selectedIndex].getAttribute(&quot;data-price&quot;);
        document.getElementById('price').value = myNewOption;
  
        });
      &lt;/script&gt;
  </code></pre>