I am working in one inventory project I use bootsrap modal for inserting and updating records the problem that I am facing is that when I am editing the record the jquery validation only applied on first row not on any other row can any one help me in this matter.

index page is like below

<tbody>
  @foreach ($suppliers as $key => $supplier)
    <tr class="odd">
      <td class="sorting_1 dtr-control">{{ $key + 1 }}</td>
      <td>{{ $supplier->name }}</td>
      <td>{{ $supplier->mobile_no }}</td>
      <td>{{ $supplier->email }}</td>
      <td>{{ $supplier->address }}</td>
      <td>
          <a href="#edit{{ $supplier->id }}" data-bs-toggle="modal" class="fas fa-edit"                                                 title="Edit Data" style=" margin-right:20px">
         </a>
      @include('backend.supplier.editSupplier')
   </td>
    </tr>
  @endforeach
</tbody>

Modal is like below

<div class="modal fade editModal" id="edit{{ $supplier->id }}" tabindex="-1" role="dialog"
      aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Edit Supplier</h5>
                  <button type="button" class=" btn btn-danger btn btn-sm close" data-bs-dismiss="modal"
                      aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <form id="editForm" method="POST" action="{{ route('supplier.update', $supplier->id) }}"
                  class="needs-validation" novalidate>
                  @csrf
                  @method('PUT')
                  <div class="modal-body">
                      <!-- name -->
                      <div class="col-md-12 ">
                          <div class="mb-3 position-relative form-group">
                               <input class="form-control" type="text" autocomplete="name" placeholder="Supplier Name"
                                  id="name" name="name1" value="{{ $supplier->name }}">
                          </div>
                      </div>
                      <!-- mobile number -->
                      <div class="col-md-12 ">
                          <div class="mb-3 position-relative form-group">
                              <input class="form-control " type="text" autocomplete="mobile_no"
                                  placeholder="Mobile Number" id="mobile_no" name="mobile_no1"
                                  value="{{ $supplier->mobile_no }}">

                          </div>
                      </div>
                      <!-- email -->
                      <div class="col-md-12 ">
                          <div class="mb-3 position-relative form-group">
                              <input class="form-control " type="email_address" placeholder="Email" id="email_address"
                                  name="email_address1" value="{{ $supplier->email }}">
                          </div>
                      </div>
                      <div class="col-md-12 ">
                          <div class="mb-3 position-relative form-group">
                              <input class="form-control" type="text" autocomplete="address" placeholder="Address"
                                  id="address" name="address1" value="{{ $supplier->address }}">
                          </div>
                      </div>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                          onclick="resetForm()">No</button>
                      <button type="submit" class="btn btn-primary">Add Supplier</button>
                  </div>
              </form>
          </div>
      </div>
  </div>

Jquery code is like below

<script type="text/javascript">
        $(document).ready(function() {
            $('#editForm').validate({
                rules: {
                    name1: {
                        required: true,
                    },
                    mobile_no1: {
                        required: true,
                    },
                    address1: {
                        required: true,
                    },
                    email_address1: {
                        required: true,
                    },
                },
                messages: {
                    name1: {
                        required: 'Please Enter Supplier Name',
                    },
                    mobile_no1: {
                        required: 'Please Enter Supplier mobile number',
                    },
                    address1: {
                        required: 'Please Enter Supplier address',
                    },
                    email_address1: {
                        required: 'Please Enter Supplier email',
                    },
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                },
            });

        });
     
      function resetForm() {
          $("#editForm").trigger("reset");

          var validator = $("#editForm").validate();
          validator.resetForm();
      }
  </script>