JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<table border="1" style="border-style:dotted" width="100%" id="table_booking">
    <tr>
        <td>
            <label>Number Of Spaces</label>
        </td>
        <td>
            <select id="dropdown" class="" name="spaces" onchange="addForm(this.value)">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </td>
    </tr>
    <table border="1" style="background-color:gray" width="100%" id="table_form"></table>
</table>

JavaScript

function addForm(space) {
     var val = space;
     var doc = document.getElementById('table_booking').getElementsByTagName('tbody')[0];
     if (doc.getElementsByTagName('tr').length > 1) {
         var len = doc.getElementsByTagName('tr').length;
         for (i = (len - 1); i >= 1; i--) {
             doc.getElementsByTagName('tr')[i].remove();
         }
     }

     for (var i = 1; i <= val; i++) {
         t = doc;
         r = t.insertRow(i);
         c = r.insertCell(0);
         c.innerHTML = "<form><label>Name </label><input type='text'></form>";
         doc.appendChild(r);
     }
 }