title: Add MySQL database data to a HTML element using ajax/jquery
body: <p>I have a test.html page which has two  and four buttons. When the page loads, i want to retrieve data from mysql database using php and then use ajax to display that in the div. But there are four rows in the table. Also when button 1 is clicked values of row 1 should display, button 2 should display values of row2 ..... How to do it? I dont want to query the database for each button click.</p>
  
  <p><strong>test.html</strong></p>
  
  <pre><code>  &lt;div id="q1"&gt;&lt;/div&gt;
    &lt;div id="q2"&gt;&lt;/div&gt;
  
  &lt;button type="button" data-value="1"&gt;1&lt;/button&gt;
  &lt;button type="button" data-value="2"&gt;2&lt;/button&gt;
  &lt;button type="button" data-value="3"&gt;3&lt;/button&gt;
  </code></pre>
  
  <p><strong>test.php</strong></p>
  
  <pre><code>$sql = "SELECT q1, q1 FROM test WHERE test=1";
  $result = mysqli_query($conn, $sql);
  echo json_encode($result);
  </code></pre>
  
  <p><strong>test.js</strong></p>
  
  <pre><code>$().ready(function() {
  
  'use strict';
  var testid;
  var string = "";    
  
      $("button").click(function(){
      testid=$(this).data("value");
  
  
  
                               $.ajax({
                                      type: 'POST',
                                      dataType: 'json',
                                      url: 'js/php/testpaper.php',
                                      data: {
  
                                          testid1: testid
                                      }
                                  }).done(function(data) { 
  
                      });
  });
  </code></pre>