I am trying to display result in text boxes after fetching data with javascript.

While database contains multiple entries for the expected result, I am only able to display result in one row and the script is not adding additional rows dynamically. Solution needs to be implemented in javascript only.

```js
var data1 = "test";
$.ajax({
    url : "EmployeeTaskServlet",
    type : "POST",
    data : {data1: data1},
    success : function(result){
        var taskList = $.parseJSON(result);
        document.getElementById("campo1").value = (taskList[i].minorTaskName);
        document.getElementById("campo2").value = (taskList[i].estimatedTime);
        document.getElementById("campo3").value = (taskList[i].minorTaskDetails);
        alert(taskList[0].taskStatus);
        document.getElementById("number-tasks-2").innerHTML = ( + taskList.length);
        //document.getElementById('currentStatusDB').value = (document.getElementById('currentStatusInput').value);
        var count = taskList.length;
    }
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="hide-row">
    <div class="col-lg-4 mb-1">
        <div class="card h-100 text-left">
            <div class="card-body">
                <div class="table-responsive">
                    <table style="border: none;" id="dynamic_field_time">
                        <tr>
                            <td style="border: none;"><input type="text" name="name[]" class="form-control name_list" id="campo1" readonly/></td>
                            <td style="width: 20%;border: none;"><input type="text" name="name[]" class="form-control name_list" id="campo2" readonly/></td>
                            <td style="border: none;"><input type="text" name="name[]" class="form-control name_list" id="campo3" readonly/></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
```