title: Old input array AND dynamic fields - Laravel - Blade
body: <p>After validation fails. The values are flashed to the fields. </p>
  
  <p>Now, I am trying to use old input to display all the dynamic fields where the user-added data.
  Therefore, I am using an array called "name" and loop through them to determine how many names are stored in the array. This determines the number of fields I need to display.
  But my field is a select field. This already checks within an array which field is select. </p>
  
  <p>So, for example, the user selects "Jan" from the field called "name". Using the dynamic fields, a new field is added. Here the user selects "Piet". He submits, but he made somewhere else in the form a mistake, the validation fails. 
  Now, my two select fields ("name") displays in both cases are Piet, Instead of piet and Jan. And I also need to press "Add Task" button in order to display the second field.</p>
  
  <p>I guess I need to add some unique ID. But I don't see how I can do this because I am already working within an array for the select option. 
  Thanks for the input</p>
  
  <h3>Blade template.</h3>
  
  <pre><code>@if( old('name') )
  
       {{ $i=0 }}
  
       @foreach( old('name') as $field)
  
           {{ $i++ }}
  
             &lt;div id="dynamicFields"&gt;
                  &lt;!-- Start row --&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-2"&gt;
                          &lt;div class="d-flex"&gt;
                              &lt;div class="p-1"&gt; 
                                  &lt;label class="showName p-2" for="name" &gt;Name&lt;/label&gt;
                              &lt;/div&gt; 
                          &lt;/div&gt;
                      &lt;/div&gt; 
                      &lt;div class="col-4"&gt; 
                          &lt;div class="d-flex"&gt; 
  ### Name field   
  &lt;!-- First time Jan is selected second time Piet is select but after failed validation. The form displays always Piet --&gt;    
  
                              &lt;div class="flex-fill p-2"&gt;
                                  &lt;select class="form-control showName" id="selectNameType0" name="name[]" onchange="showType(0)"&gt;
                                      &lt;option value="Jan" {{ in_array('Jan', old('name') ?? [] ) ? 'selected' : '' }}&gt;Jan&lt;/option&gt;
                                      &lt;option value="Piet" {{ in_array('Piet', old('name') ?? [] ) ? 'selected' : '' }}&gt;Piet&lt;/option&gt;
                                      &lt;option value="Tom" {{ in_array('Tom', old('name') ?? [] ) ? 'selected' : '' }}&gt;Tom&lt;/option&gt;
                                      &lt;option value="Dean" {{ in_array('Dean', old('name') ?? [] ) ? 'selected' : '' }}&gt;Dean&lt;/option&gt;
                                      &lt;option value="Bert" {{ in_array('Bert', old('name') ?? [] ) ? 'selected' : '' }}&gt;Bert&lt;/option&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                          &lt;/div&gt; 
                      &lt;/div&gt;
                      &lt;div class="col-2"&gt;
                          &lt;div class="d-flex"&gt;
                              &lt;div class="p-1"&gt;
                                  &lt;label class="p-2" for="type" id="showTypeLabel0" style="display: none;"&gt;Type&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-4"&gt; 
                          &lt;div class="d-flex"&gt;   
                              &lt;div class="flex-fill p-2"&gt;
                                  &lt;select class="form-control" id="showType0" name="type[]" style="display: none;"&gt;
                                      &lt;option value="Operator" {{ in_array('Operator', old('type') ?? [] ) ? 'selected' : '' }}&gt;Operator&lt;/option&gt;
                                      &lt;option value="Analysist" {{ in_array('Analysist', old('type') ?? [] ) ? 'selected' : '' }}&gt;Analysist&lt;/option&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                          &lt;/div&gt; 
                      &lt;/div&gt;     
                  &lt;/div&gt; &lt;!-- End row --&gt;
  
                  &lt;!-- Start row --&gt;
                  &lt;div class="row mb-4"&gt;
                      &lt;div class="col-2"&gt;
                          &lt;div class="d-flex"&gt;
                              &lt;div class="p-1"&gt;
                                  &lt;label class="showName p-2" for="date"&gt;Date&lt;/label&gt;
                              &lt;/div&gt; 
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-4"&gt; 
                          &lt;div class="d-flex"&gt;                    
                              &lt;div class="flex-fill p-2"&gt;
                                  &lt;input class="form-control showName" 
                                          type="date" 
                                          name="date[]" 
                                  &gt;
                              &lt;/div&gt;
                          &lt;/div&gt; 
                      &lt;/div&gt;
                  &lt;/div&gt; &lt;!-- End row --&gt; 
              &lt;/div&gt; &lt;!-- End dynamicFields --&gt;
        @endforeach
  @endif
  
          &lt;div class="row showName" style="margin: 10px;"&gt;
              &lt;div class="col-4 offset-4"&gt;
                  &lt;input type="button" name="submit" id="submit" class="btn btn-success btn-block addmore" value="Add Task" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  </code></pre>
  
  <h3>jQuery for dynamic fields</h3>
  
  <pre><code>    $(document).ready(function() {
          // Start from 1
          var i = 1;
          // When button clicked
          $('.addmore').click(function(){
              i++;
              // add the following layout
              $('#dynamicFields').append('&lt;div class="row removing'+i+'"&gt;&lt;div class="col-2"&gt;&lt;div class="d-flex"&gt;&lt;div class="p-1"&gt;&lt;label class="showName p-2" for="name" &gt; Name&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col-4"&gt; &lt;div class="d-flex"&gt;&lt;div class="flex-fill p-2"&gt;&lt;select class="form-control showName" id="selectType'+i+'" onchange="showType('+i+')" name="name[]"&gt;&lt;option&gt;&lt;/option&gt;&lt;option value="Jan"&gt;Jan&lt;/option&gt;&lt;option value="Piet"&gt;Piet&lt;/option&gt;&lt;option value="Tom"&gt;Tom&lt;/option&gt;&lt;option value="Bert"&gt;Bert&lt;/option&gt;&lt;option value="Dean"&gt;Dean&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col-2"&gt;&lt;div class="d-flex"&gt;&lt;div class="p-1"&gt;&lt;label class="p-2" id="showNameTypeLabel'+i+'" for="type" style="display: none;"&gt; Type&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col-4"&gt; &lt;div class="d-flex"&gt;&lt;div class="flex-fill p-2"&gt;&lt;select class="form-control" id="showNameType'+i+'" name="type[]" style="display: none;"&gt;&lt;option&gt;&lt;/option&gt;&lt;option value="Operator"&gt;Operator&lt;/option&gt;&lt;option value="Analysist"&gt;Analysist&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="row removing'+i+'"&gt;&lt;div class="col-2"&gt;&lt;div class="d-flex"&gt;&lt;div class="p-1"&gt;&lt;label class="showName p-2" for="date"&gt; Date&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col-4"&gt; &lt;div class="d-flex"&gt;&lt;div class="flex-fill p-2"&gt;&lt;input class="form-control showName" type="date" name="date[]"&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt;&lt;div class="col-2"&gt;&lt;div class="d-flex"&gt;&lt;div class="p-1"&gt;&lt;label class="showName p-2" for="time"&gt; Time&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col-4"&gt; &lt;div class="d-flex"&gt;&lt;div class="flex-fill p-2"&gt;&lt;input class="form-control showName" type="time" name="time[]" &gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt;&lt;/div&gt;&lt;div class="row removing'+i+' showName" style="margin: 10px;"&gt;&lt;div class="col-4 offset-4"&gt;&lt;button type="button" class="btn btn-danger btn-block remove-fields"&gt;Remove  Moment&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;');
              });
          // Removing fields
          $('#dynamicFields').on('click', '.remove-fields', function(){
              $('.removing'+i).remove(); i--;
          })
      });
  
  </code></pre>