Leaderboard

That code is doing things the hard way. HTML has a template tag for a reason. Use your PHP code to generate a template row in a template tag. The your JS only needs to clone that row and add it to the table. For example: Template: <template id="row-template"> <tr> <td></td> <td> <select class="background" name="Department[]"> <option value="">Department</option> <?php $qry = mysqli_query($conn,"SELECT DISTINCT Brand FROM model ORDER BY Brand ASC"); while($row = $qry->fetch_assoc()) { echo "<option"; if(isset($_REQUEST['Department']) and $_REQUEST['Department']==$row['Brand']) echo ' selected="selected"'; echo ">{$row['Brand']}</option>\n"; } ?> </select> </td> <td><input type='text' name='category[]'></td> <td><input type='text' name='sub_category[]'></td> <td><input type='text' name='model[]'></td> <td><input type='number' name='qty[]'></td> </tr> </template> JS: const template=document.getElementById('row-template'); const tbody=document.getElementById('tbody'); let itemCount=0; function addItem(){ const newRow = template.content.cloneNode(true); const firstTd = newRow.querySelector('td:first-child'); firstTd.textContent=++itemCount; tbody.appendChild(newRow); }