Form tags automatically closing

I am trying to validator with jsquery validator plugin. but it doesn't working. Now I found in chorme dev tools, tag is closed automatically!

It seems to be related to the for loop in Django. Why does the form tags closed automatically? what's wrong with my script?

In my .html codes,

<div class="container-box">
      <div>
        <table class="table table-striped tc">
          <div style="float: right; padding: 1%">
            <p style="width: 40%; float: left; font-weight: bold">Register for My rate :</p>
            <input type="text" style="border-radius: 5px; width: 30%; float: left" class="inputgroup form-control form-control-sm tc" placeholder="group" /> <button class="btn btn-outline-primary btn-sm sendgroup" style="float: right; width: 30%">Register</button>
          </div>

          <thead class="table">
            <tr>
              <td>Origin</td>
              <td>Dest</td>
              <td>Name</td>
              <td>Cur</td>
              <td>Rate</td>
              <td>Unit</td>
              <td>ChargeAt</td>
              <td>Group</td>
              <td>U/D</td>
            </tr>
          </thead>

          <tbody class="tbody">
            {% for i in info %}
            <form id="UpdateForm{{i.id}}">
              <tr class="tr{{i.id}}">
                <td><input type="text" value="{{i.origin}}" class="origin{{i.id}} tc form-control form-control-sm" disabled name="udtorigin" /></td>
                <td><input type="text" value="{{i.dest}}" class="dest{{i.id}} tc form-control form-control-sm" disabled name="udtdest" /></td>
                <td><input type="text" value="{{i.name}}" class="name{{i.id}} tc form-control form-control-sm" disabled name="udtname" /></td>
                <td>
                  <select id="cur" class="cur{{i.id}} tc form-select form-select-sm" disabled name="udtcur">
                    <option value="{{i.cur}}">{{i.cur}}</option>
                    <option value="====">====</option>
                    <option value="USD">USD</option>
                    <option value="KRW">KRW</option>
                  </select>
                </td>
                <td><input type="text" value="{{i.rate}}" class="rate{{i.id}} tc form-control form-control-sm" disabled name="udtrate" /></td>
                <td>
                  <select id="unit" class="unit{{i.id}} tc form-select form-select-sm" disabled name="udtunit">
                    <option value="{{i.unit}}">{{i.unit}}</option>
                    <option value="====">====</option>
                    <option value="R/TON">R/TON</option>
                    <option value="BL">BL</option>
                    <option value="KG">KG</option>
                  </select>
                </td>
                <td>
                  <select id="" class="chargeAt{{i.id}} tc form-select form-select-sm" disabled name="udtchargeAt">
                    <option value="{{i.chargeAt}}">{{i.chargeAt}}</option>
                    <option value="====">====</option>
                    <option value="origin">origin</option>
                    <option value="freight">freight</option>
                    <option value="destination">destination</option>
                  </select>
                </td>
                <td><input type="text" value="{{i.group}}" class="group{{i.id}} tc form-control form-control-sm" disabled name="udtgroup" /></td>
                <td>
                  <button id="{{i.id}}" type="button" class="btn btn-outline-primary btn-sm editbtn{{i.id}}" onclick="editbtn(this.id)">edit</button>
                  <button style="display: none" id="{{i.id}}" class="btn btn-success btn-sm updatebtn{{i.id}}" onclick="updaterate(this.id)" data-bs-toggle="modal" data-bs-target="#updateModal{{i.id}}">save</button>
                  <div class="modal fade" id="updateModal{{i.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h1 class="modal-title fs-5" id="exampleModalLabel">Success</h1>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">Your changes have been successfully saved.</div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">close</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <button id="{{i.id}}" class="btn btn-outline-danger btn-sm deletebtn{{i.id}}" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#deleteModal{{i.id}}">Delete</button>
                  <div class="modal fade" id="deleteModal{{i.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h1 class="modal-title fs-5" id="exampleModalLabel">Attention</h1>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">Are you sure you want to delete?</div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">close</button>
                          <button type="button" id="{{i.id}}" class="btn btn-danger btn-sm" onclick="deleterate(this.id)" data-bs-dismiss="modal">delete</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <button style="display: none" id="{{i.id}}" class="btn btn-secondary btn-sm cancelbtn{{i.id}}" onclick="cancel(this.id)">Cancel</button>
                </td>
              </tr>
            </form>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

in Chrome dev tools

<tbody class="tbody">
            
            <form id="UpdateForm31"></form>
              <tr class="tr31">
                <td><input type="text" value="sha" class="origin31 tc form-control form-control-sm" disabled="" name="udtorigin"></td>
                <td><input type="text" value="icn" class="dest31 tc form-control form-control-sm" disabled="" name="udtdest"></td>
                <td><input type="text" value="1" class="name31 tc form-control form-control-sm" disabled="" name="udtname"></td>
                <td>
                  <select id="cur" class="cur31 tc form-select form-select-sm" disabled="" name="udtcur">
                    <option value="USD">USD</option>
                    <option value="====">====</option>
                    <option value="USD">USD</option>
                    <option value="KRW">KRW</option>
                  </select>
                </td>
                <td><input type="text" value="1" class="rate31 tc form-control form-control-sm" disabled="" name="udtrate"></td>
                <td>
                  <select id="unit" class="unit31 tc form-select form-select-sm" disabled="" name="udtunit">
                    <option value="R/TON">R/TON</option>
                    <option value="====">====</option>
                    <option value="R/TON">R/TON</option>
                    <option value="BL">BL</option>
                    <option value="KG">KG</option>
                  </select>
                </td>
                <td>
                  <select id="" class="chargeAt31 tc form-select form-select-sm" disabled="" name="udtchargeAt">
                    <option value="origin">origin</option>
                    <option value="====">====</option>
                    <option value="origin">origin</option>
                    <option value="freight">freight</option>
                    <option value="destination">destination</option>
                  </select>
                </td>
                <td><input type="text" value="1" class="group31 tc form-control form-control-sm" disabled="" name="udtgroup"></td>
                <td>
                  <button id="31" type="button" class="btn btn-outline-primary btn-sm editbtn31" onclick="editbtn(this.id)">edit</button>
                  <button style="display: none" id="31" class="btn btn-success btn-sm updatebtn31" onclick="updaterate(this.id)" data-bs-toggle="modal" data-bs-target="#updateModal31">save</button>
                  <div class="modal fade" id="updateModal31" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h1 class="modal-title fs-5" id="exampleModalLabel">Success</h1>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">Your changes have been successfully saved.</div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">close</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <button id="31" class="btn btn-outline-danger btn-sm deletebtn31" type="button" data-bs-toggle="modal" data-bs-target="#deleteModal31">Delete</button>
                  <div class="modal fade" id="deleteModal31" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h1 class="modal-title fs-5" id="exampleModalLabel">Attention</h1>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">Are you sure you want to delete?</div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">close</button>
                          <button type="button" id="31" class="btn btn-danger btn-sm" onclick="deleterate(this.id)" data-bs-dismiss="modal">delete</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <button style="display: none" id="31" class="btn btn-secondary btn-sm cancelbtn31" onclick="cancel(this.id)">Cancel</button>
                </td>
              </tr>
          </tbody>

my validator script

<script>
      function updaterate(id) {
        jQuery.validator.addMethod(
          "noSpace",
          function (value, element) {
            return value.indexOf(" ") < 0 && value != "";
          },
          "Space are not allowed"
        );
        $("#UpdateForm" + id).validate({
          rules: {
            udtorigin: {
              required: true,
              maxlength: 5,
              noSpace: true,
            },
            udtdest: {
              required: true,
              maxlength: 5,
              noSpace: true,
            },
            udtrate: {
              required: true,
              number: true,
              noSpace: true,
            },
          },
          messages: {
            udtorigin: {
              required: "Input origin",
              maxlength: "It cannot exceed 5 characters.",
            },
            udtdest: {
              required: "Input dest",
              maxlength: "It cannot exceed 5 characters.",
            },
            udtrate: {
              required: "Input rate",
              number: "Allow numbers only",
            },
          },
          submitHandler: function () {
            var origin = $(".origin" + id).val();
            var dest = $(".dest" + id).val();
            var name = $(".name" + id).val();
            var cur = $(".cur" + id).val();
            var rate = $(".rate" + id).val();
            var unit = $(".unit" + id).val();
            var chargeAt = $(".chargeAt" + id).val();
            var group = $(".group" + id).val();

            param = {
              id: id,
              origin: origin,
              dest: dest,
              name: name,
              cur: cur,
              rate: rate,
              unit: unit,
              chargeAt: chargeAt,
              group: group,
            };
            $.ajax({
              type: "POST",
              url: "{% url 'lclupdate' %}",
              data: JSON.stringify(param),
              success: function () {
                $(".updatebtn" + id).css("display", "none");
                $(".cancelbtn" + id).css("display", "none");
                $(".deletebtn" + id).css("display", "");
                $(".editbtn" + id).css("display", "");
                $(".origin" + id).attr("disabled", true);
                $(".dest" + id).attr("disabled", true);
                $(".name" + id).attr("disabled", true);
                $(".cur" + id).attr("disabled", true);
                $(".rate" + id).attr("disabled", true);
                $(".unit" + id).attr("disabled", true);
                $(".chargeAt" + id).attr("disabled", true);
                $(".group" + id).attr("disabled", true);
                $(".tr" + id).css("background-color", "");
              },
            });
          },
        });
      }
    </script>

my form tag in my html includes as below.

<form id="UpdateForm{{i.id}}">
<tr></tr>
</form>

But in works at web as below.


<form id="UpdateForm31"></form>
<tr></tr>
Back to Top