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

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)

See below screenshot for understanding

Image -1 :for Datatable Screenshot here.

<a href="https://drive.google.com/file/d/11yeh5yee4Ey4wjuqKU2J24NMALAdV9Fw/view?usp=sharing">image-1.PNG - Google Drive</a>[<a href="https://drive.google.com/file/d/11yeh5yee4Ey4wjuqKU2J24NMALAdV9Fw/view?usp=sharing" target="_blank" title="New Window">^</a>]


Image -2 : if I click on 1st row of datatable then I can get flags in fields

<a href="https://drive.google.com/file/d/1pT1f7576-N5ML53lHXhmvDoYNnrcJmet/view?usp=sharing">image-2.PNG - Google Drive</a>[<a href="https://drive.google.com/file/d/1pT1f7576-N5ML53lHXhmvDoYNnrcJmet/view?usp=sharing" target="_blank" title="New Window">^</a>]

Image -3 : If I click on second row of datatable then I have not get flags icon in field.

<a href="https://drive.google.com/file/d/1OH2J3AmsUzcNEmV5TVRV9tJtpsQUgU1G/view?usp=sharing">image-3.PNG - Google Drive</a>[<a href="https://drive.google.com/file/d/1OH2J3AmsUzcNEmV5TVRV9tJtpsQUgU1G/view?usp=sharing" target="_blank" title="New Window">^</a>] 

{% for vr in adduser.adduser.all %} {% csrf_token %} Edit Contact Data ×

<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-->