Country code flag icon is not showing on form in for loop

[KrupaVasava]

I am trying to getting flag icon on every edit form of each datatable row have edit button. but unfortunately I can see flag icon only in 1st row of edit form of datatable grid. and in other rows I am not able to see flag icon. Can you help us how can I modified my javascript so I can see flag icon on every edit form of each row of datatable.

NOTE : We have code is in Django Python and the variable is in DTL (djnango Template Language)

Datatable Code:

{{adduser.brl_name}}

{% for vr in adduser.adduser.all %} {% endfor %}

	Department Name	Name	SMS No.	WhatsApp No.	Email	Country	City	Zip Code	Activity
	{{vr.dept_nm}}	{{vr.f_name}} {{vr.l_name}}	{{vr.sms_no}}	{{vr.whtsp_no}}	{{vr.e_mail}}	{{vr.country}}	{{vr.city}}	{{vr.zip}}	Edit Delete

HTML Code :

Edit Form :

{% for vr in adduser.adduser.all %}
<div class="modal fade" id="userEditModal-{{forloop.counter}}" tabindex="-1" role="dialog"
  aria-labelledby="largeModal" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <form method="POST" action="{% url 'edituser' vr.id %}" class="needs-validation" novalidate>
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title">Edit Contact Data</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!--Form Start-->

          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="FirstName">First Name<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="firstname" id="firstname"
                placeholder="Type FirstName here...." value="{{vr.f_name}}" required />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>
            <div class="form-group col-md-6">
              <label for="LastName">Last Name<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="lastname" id="lastname"
                placeholder="Type LastName here...." value="{{vr.l_name}}" required />
            </div>
            <div class="valid-feedback">Valid.</div>
            <div class="invalid-feedback">Please fill out this field.</div>
          </div>

          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="Address">Address Line1<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="addln1" id="addln1"
                placeholder="Type Address here...." value="{{vr.add_ln1}}" required />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>
            <div class="form-group col-md-6">
              <label for="Address">Address Line2</label>
              <input type="text" class="form-control" name="addln2" id="addln2"
                placeholder="Type Address here...." value="{{vr.add_ln2}}" />
            </div>
          </div>

          <div class="form-row">

            <div class="form-group col-md-4">
              <label for="Country">City<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="city" id="city" placeholder="Type city here...."
                required value="{{vr.city}}" />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>

            <div class="form-group col-md-4">
              <label for="Country">Country<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="country" id="country"
                placeholder="Type Country here...." value="{{vr.country}}" required />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>

            <div class="form-group col-md-4">
              <label for="Country">Zip Code<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="zip" id="zip" placeholder="Type zipcode here...."
                value="{{vr.zip}}" required />
            </div>
            <div class="valid-feedback">Valid.</div>
            <div class="invalid-feedback">Please fill out this field.</div>
          </div>

          <div class="form-row">

            <div class="form-group col-md-6 smsForm_edit">
              <label for="contact1">SMS No.<span style="color:#ff0000">*</span></label>
              <input type="tel" class="form-control" name="smsno_edit" id="smsno_edit" value="{{vr.sms_no}}"
                placeholder="SMS No." pattern="^(00|\+)[1-9]{1}([0-9][\s]*){9,16}$" required />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please enter valid contact no.</div>
            </div>
            <div class="form-group col-md-6 whatsappForm_edit">
              <label for="contact2">WhatsApp No.<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="whtspno_edit" id="whtspno_edit" value="{{vr.whtsp_no}}"
                placeholder="WhatsApp No." pattern="^(00|\+)[1-9]{1}([0-9][\s]*){9,16}$" required />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please enter valid contact no.</div>
            </div>
          </div>

          <script>

          const phoneInputField_edit = document.querySelector("#smsno_edit");
          const phoneInputField2_edit = document.querySelector("#whtspno_edit");
          const phoneInput_edit = window.intlTelInput(phoneInputField_edit, {});
          const phoneInput2_edit = window.intlTelInput(phoneInputField2_edit, {});

          $(document).ready(function () {
            $('.smsForm_edit .iti__flag-container').click(function () {
              var countryCode = $('.smsForm_edit .iti__selected-flag').attr('title');
              var countryCode = countryCode.replace(/[^0-9]/g, '');
              $('#smsno_edit').val("");
              $('#smsno_edit').val("+" + countryCode + $('#smsno_edit').val());
            });
            $('.whatsappForm_edit .iti__flag-container').click(function () {
              var countryCode = $('.whatsappForm_edit .iti__selected-flag').attr('title');
              var countryCode = countryCode.replace(/[^0-9]/g, '');
              $('#whtspno_edit').val("");
              $('#whtspno_edit').val("+" + countryCode + $('#whtspno_edit').val());
            });
          });
         </script>

          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="email">Email<span style="color:#ff0000">*</span></label>
              <input type="email" class="form-control" name="email" id="email" placeholder="Type email here...."
                value="{{vr.e_mail}}" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" required />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please enter valid email address.</div>
            </div>
            <div class="form-group col-md-6">
              <label for="Department">Department Name<span style="color:#ff0000">*</span></label>

              <select class="form-control" name="deptnm" id="deptnm" required readonly>
                <option>{{vr.dept_nm}}</option>
              </select>
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-md-6">
              <label>Broadcast list<span style="color:#ff0000">*</span></label>

              <input type="text" class="form-control" id="brdctlst" name="brdctlst" value="{{adduser.brl_name}}"
                readonly>

              </select>
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>
          </div>
          <!--Form End-->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            Close
          </button>
          <button href="{% url 'broadcastlist' %}" id="UpdateUser" type="submit" class="btn btn-primary">Update</button>
        </div>
      </form>
      <div class="alert alert-info" style="display: none;"></div>

    </div>
  </div>
</div>
{% endfor %}

<!--Edit Model End From Here-->

[dropways]

Hello @KrupaVasava

I didn't get you point. please give me a codepen demo so I can understand your issue.

Thank you.