使用ajax / jquery将MySQL数据库数据添加到HTML元素

Question

我有一个test.html页面，它有两个和四个按钮。当页面加载时，我想使用php从mysql数据库中检索数据，然后使用ajax在div中显示。但表中有四行。此外，当单击按钮1时，应显示第1行的值，按钮2应显示第2行的值.....如何操作？我不想在每次点击按钮时查询数据库。

的test.html

  <div id="q1"></div>
  <div id="q2"></div>

<button type="button" data-value="1">1</button>
<button type="button" data-value="2">2</button>
<button type="button" data-value="3">3</button>

test.php的

$sql = "SELECT q1, q1 FROM test WHERE test=1";
$result = mysqli_query($conn, $sql);
echo json_encode($result);

test.js

$().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) { 

                    });
});