add-or-remove-table-row-based-focus.html

<input type="number" id="days"> <!-- the td and tr are added equal to this value -->
<input type="text" onfocus="addItineraryDays()"> <!-- function calling onfocus this input -->
<table class="table table-striped table-bordered">
    <thead>
    <tr>
        <th>Day</th>
        <th>Itineraries</th>
    </tr>
    </thead>
    <tbody id="myTable">
      <!-- Here td and tr will be appended -->
    </tbody>
</table>
<script>
    function addItineraryDays() {
        let value = document.getElementById('days').value;
        let table = document.getElementById("myTable");
        $(table).empty();
        for (let i = 0; i < value; i++) {
            let row = table.insertRow(0);
            let cell1 = row.insertCell(0);
            let cell2 = row.insertCell(1);
            cell1.innerHTML = '<label>' +
                                  '<input type="number" name="itinerary_days[]">' +
                              '</label>';
            cell2.innerHTML = '<label>' +
                                  '<input type="text" name="itinerary_details[]">' +
                              '</label>';
        }
    }
</script>