javascript - display multiple data from database to multiple input box

Question

So I have this problem where I want to display multiple values to multiple input boxes depending on how many the value is. I have already a code but the problem is it is only displaying the value in one input box. I will show you the code.

Here is the database:

attId   attSubject        attDate     docId
------  ----------------- ----------  ------
     1  FAAS FRONT & BACK 2018-01-25      36
     2  NOA & TAX BILL    2018-09-12      36

HTML code:

<input type="text" id="attchecklist" name="attchecklist">

Javascript code:

$("#num").val(mydata.docId);
var docIdChecklist = $("#num").val();
$("#attchecklist").load('php/getAttachmentForChecklist.php',
     {docIdChecklist:docIdChecklist},
      function(data) {
          $("#attchecklist").val(data);
      }
 );

PHP code:

<?php 
require_once('../kclass/kconnect.php');
require_once('../common.php');
session_name(xevPRJ);
session_start();
$response= new kconnect();
$response->DB = $_SESSION['sys'];
$docIdChecklist = $_POST['docIdChecklist'];

$response->setCon();


$sqlx = "SELECT attSubject from `attachment` WHERE ((docId = '$docIdChecklist') AND (is_deleted = 0))";
$resultx=$response->kMysqli->query($sqlx);
while($row=mysqli_fetch_array($resultx, MYSQL_ASSOC)){
        $attSubject = $row['attSubject'];

        echo $attSubject;

    }

$response->unsetCon();
?>

and here is the result:

I want the result to be separated in input boxes. How to achieve this?

Answer 1

Assuming your div something like this

<div id="myDiv></div>

Then you can append your form using JS

...
$("#attchecklist").load('php/getAttachmentForChecklist.php',
    {docIdChecklist:docIdChecklist},
    function(data) {
        data = JSON.parse(data);
        $.each(data, function(index, value) {
            $("#myDiv").append(`<input type="text" id="attchecklist${index}" name="attchecklist${index}" value="${value}">`)
        });
    }
);

However, you are expected to return JSON array of data, instead of just echo the data on PHP API. Something like this:

$result = [];
while($row=mysqli_fetch_array($resultx, MYSQL_ASSOC)){
    array_push($result, $row['attSubject']);
}

$response->unsetCon();
echo json_encode($result);