title: How to properly correct this found elements with non-unique id errors?
body: <p>I have this form for a user to introduce some data to register in a congress. </p>
  
  <p>First he needs to introduce some buyer information, then if there is some paid ticket type also some billing information. Then if the congress table has the column "collect_data_from_all_participants" as 1 the usre also needs to introduce information for each selected ticket type. This information for each ticket type is the name and surname of each participant so I have the name of the field "Name" as "name" and the field "Surname" with the name "surname". T</p>
  
  <p>he issue is then in the console it appears :</p>
  
  <pre><code> [DOM] Found 4 elements with non-unique id #name: 
  
  `DOM] Found 3 elements with non-unique id #surname: 
  </code></pre>
  
  <p>Do you know what is the best approach to correct the issue?</p>
  
  <pre><code>&lt;div class="registration_form mt-4"&gt;
  
  
      &lt;form method="post" class="clearfix"&gt;
  
          &lt;div class="tab-content registration_body bg-white" id="myTabContent"&gt;
              &lt;div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab"&gt;
                  &lt;h6&gt;Buye information&lt;/h6&gt;                    
  
                  &lt;div class="form-group font-size-sm"&gt;
                      &lt;label for="name" class="text-gray"&gt;Name&lt;/label&gt;
                      &lt;input type="text" required class="form-control"  id="name" value="{{ (\Auth::check()) ? Auth::user()-&gt;name : old('name')}}"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group font-size-sm"&gt;
                      &lt;label for="surname" class="text-gray"&gt;Surname&lt;/label&gt;
                      &lt;input type="text" required class="form-control" name="surname" id="surname" value="{{ (\Auth::check()) ? Auth::user()-&gt;surname : old('surname')}}"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group font-size-sm"&gt;
                      &lt;label for="email" class="text-gray"&gt;Email&lt;/label&gt;
                      &lt;input type="text" required class="form-control" name="emai" id="email" value="{{ (\Auth::check()) ? Auth::user()-&gt;email : old('email')}}"&gt;
                  &lt;/div&gt;
  
                  @if( array_sum(array_column($selectedRtypes, 'price')) &gt; 0 )
  
                      &lt;h6&gt;Billing information&lt;/h6&gt;
  
                      &lt;div class="form-group font-size-sm"&gt;
                          &lt;label for="name" class="text-gray"&gt;Name&lt;/label&gt;
                          &lt;input type="text" required class="form-control" id="name"&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group font-size-sm"&gt;
                          &lt;label for="inputName" class="text-gray"&gt;Country&lt;/label&gt;
                          &lt;input type="text" required class="form-control" id="inputName"&gt;
                      &lt;/div&gt;
                     &lt;!-- other fields --&gt;
  
                  @endif
  
                  @if (!empty($allParticipants))
                      @if($allParticipants == 1)
                          @foreach($selectedRtypes as $k=&gt;$selectedRtype)
                              &lt;h6 class="text-heading-blue mb-3 pb-2 font-weight-bold"&gt;Participant - 1 - {{$k}}&lt;/h6&gt;
  
                              &lt;div class="form-group font-size-sm"&gt;
                                  &lt;label for="name" class="text-gray"&gt;Name&lt;/label&gt;
                                  &lt;input type="text" required class="form-control" id="name" value=""&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group font-size-sm"&gt;
                                  &lt;label for="surname" class="text-gray"&gt;Surname&lt;/label&gt;
                                  &lt;input type="text" required class="form-control" name="surname" id="surname" value=""&gt;
                              &lt;/div&gt;
                          @endforeach
                      @endif
                  @endif
  
                  &lt;button type="button" href="#step2" data-toggle="tab" role="tab"
                          class="btn btn-primary btn float-right next-step"&gt;
                      Go to step 2
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="tab-pane fade clearfix" id="step2" role="tabpanel" aria-labelledby="profile-tab"&gt;
                  &lt;form method="post" class="clearfix"&gt;
  
                      &lt;h6&gt;Select payment type&lt;/h6&gt;
  
                     &lt;!-- step 2 fields--&gt;
  
                      &lt;div class="text-right"&gt;
                      &lt;button type="button" href="#step3" data-toggle="tab" role="tab"
                              class="btn btn-outline-primary prev-step"&gt;
                          Go to step 2
                      &lt;/button&gt;
                      &lt;button type="button" href="#step3" data-toggle="tab" role="tab"
                              class="btn btn-primary btn ml-2 next-step"&gt;
                          Go to step 3
                      &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="tab-pane clearfix fade" id="step3" role="tabpanel" aria-labelledby="contact-tab"&gt;
                  &lt;form method="post" class="clearfix"&gt;
                      &lt;!-- step 3 fields--&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>