Can someone provide assistance with my code? Specifically, I am looking to add the index number whenever a user clicks the add button and would like to know how to insert text input similar to the first row. I am currently in the process of learning JavaScript. Thank you in advance!
function appendRow() {
var table = document.getElementById("childTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f7c6d5d28332d332c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<table class="table table-bordered" id="childTable">
<thead class="table-info">
<tr>
<th scope="col">No.</th>
<th scope="col">Name</th>
<th scope="col">School / University </th>
<th scope="col">Year</th>
<th scope="col">Age</th>
<th scope=""></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="col-sm-4">
<input type="text" name="name" class="form-control" />
</td>
<td>
<input type="text" name="school" class="form-control" />
</td>
<td class="col-sm-2">
<input type="text" name="year" class="form-control" />
</td>
<td class="col-sm-2">
<input type="text" name="age" class="form-control" />
</td>
<td>
<input type="button" class="btn btn-block btn-default" id="addrow" onclick="appendRow()" value="+" />
</td>
</tr>
</tbody>
</table>