<div style="overflow-x: auto;">
            <form action="" method="post">
              {% csrf_token %}
            <table class="table table-hover mt-4" id="childTable">
              <thead class="text-color fs-medium fw-bold " style="background-color:#e2edf5;">
                <tr>
                  <th>No</th>
                  <th class="text-center">PLANNED EXPENSES</th>
                  <th class="text-center">JAN</th>
                  <th class="text-center">FEB</th>
                  <th class="text-center">MAR</th>
                  <th class="text-center">APR</th>
                  <th class="text-center">MAY</th>
                  <th class="text-center">JUN</th>
                  <th class="text-center">JUL</th>
                  <th class="text-center">AUG</th>
                  <th class="text-center">SEP</th>
                  <th class="text-center">OCT</th>
                  <th class="text-center">NOV</th>
                  <th class="text-center">DEC</th>
                  <th class="text-center">Action</th>
                </tr>
              </thead>
              <tbody>
                {% for i in LcaBudget %}
                <tr class="trParent">
                  <th class="fs-medium index" scope="row">{{forloop.counter}}</th>
                  <td>{{i.expenses}}</td>
                  <td>{{i.jan}}</td>
                  <td>{{i.feb}}</td>
                  <td>{{i.mar}}</td>
                  <td>{{i.apr}}</td>
                  <td>{{i.may}}</td>
                  <td>{{i.jun}}</td>
                  <td>{{i.jul}}</td>
                  <td>{{i.aug}}</td>
                  <td>{{i.sep}}</td>
                  <td>{{i.oct}}</td>
                  <td>{{i.nov}}</td>
                  <td>{{i.dec}}</td>
                  <td>
                    <a href="/Qapi_Leadership/LcaBudget/{{i.pk}}/update/"><i class="fa-2x bi bi-pencil"></i></a>
                  </td>
                </tr>
                {% endfor %}
                <tr class="trParent">
                  <th class="fs-medium index" scope="row">1</th>
                  <input type="hidden" name="user" value="{{request.user.pk}}">
                  <td>
                    <input type="number" min="0" step="0.01" name="expenses" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jan" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="feb" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="mar" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="apr" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="may" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jun" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jul" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="aug" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="sep" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="oct" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="nov" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="dec" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <i onclick="myFunction(event)" class="fa-2x bi bi-trash-fill"></i>
                  </td>
                </tr>
              </tbody>
            </table>
            <button onclick="childrenRow()" class="btn btn-primary" type="button" id="addrow">Add new line</button>
            <button class="btn btn-primary" type="submit">Save</button>
          </form>
            <script>
              var i = 1;
              function childrenRow() {
                i++;
                $('#childTable').find('tbody').append('<tr class="trParent"><th class="fs-medium index" scope="row">' + i + '</th><input type="hidden" name="user" value="{{request.user.pk}}"><td><input type="number" min="0" step="0.01" name="expenses" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jan" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="feb" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="mar" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="apr" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="may" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jun" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jul" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="aug" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="sep" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="oct" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="nov" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="dec" class="form-control fs-medium" required /></td><td><i onclick="myFunction(event)" class="fa-2x bi bi-trash-fill"></i></td></tr>');
              }
            </script>
            <script>
              function myFunction(e) {
                // document.getElementById("childTable").deleteRow(0);
                e.currentTarget.closest(".trParent").remove();
              }
            </script>
          </div>