Front end form

_the-script.twig

<!-- Front End Form -->
        {% if entry.isEditable() %}
          <div class="lots-fields">
            <form method="post" accept-charset="UTF-8">
              {{ csrfInput() }}

              <input type="hidden" name="action" value="entries/save-entry">
              {{ redirectInput('scripts/{slug}#scriptlots') }}
              <input type="hidden" name="sectionId" value="3">
              <input type="hidden" name="entryId" value="{{entry.id}}">
              <input type="hidden" name="enabled" value="1">

              {% for block in entry.scriptLots.all() %}
                <input type="hidden" name="fields[scriptLots][{{block.id}}][type]" value="lot">
                <input type="hidden" name="fields[scriptLots][{{block.id}}][enabled]" value="1">
              {% endfor %}

              {# add new row of data #}
              <input type="hidden" name="fields[scriptLots][new1][type]" value="lot">
              <input type="hidden" name="fields[scriptLots][new1][enabled]" value="1">

              <tr>
              
                <td>
                  <div class="field">
                    <p class="control has-icons-left">
                      <input class="input" type="text" placeholder="Lot Number" name="fields[scriptLots][new1][fields][lotNumber]">
                      <span class="icon is-small is-left">
                        <i class="fal fa-list-ol"></i>
                      </span>
                    </p>
                  </div>
                </td>
                
                <td>
                  <div class="field">
                    <p class="control has-icons-left">
                      <input class="input datepicker" type="text" placeholder="Mix Date" name="fields[scriptLots][new1][fields][lotMixDate]">
                      <span class="icon is-small is-left">
                        <i class="fal fa-calendar-plus"></i>
                      </span>
                    </p>
                  </div>
                </td>
                
                <td>
                  <div class="field">
                    <p class="control has-icons-left">
                      <input class="input datepicker" type="text" placeholder="Expire Date" name="fields[scriptLots][new1][fields][lotExpireDate]">
                      <span class="icon is-small is-left">
                        <i class="fal fa-calendar-times"></i>
                      </span>
                    </p>
                  </div>
                </td>
                
                <td>
                  <div id="site_dropdown_field" class="field has-addons">
                    <div class="control has-icons-left">
                      <div class="select">
                        <select name="fields[scriptLots][new1][fields][lotSite][]">
                          {% for site in sites.orderBy('title').all() %}
                            <option value="{{site.id}}">{{site.title}}</option>
                          {% endfor %}
                        </select>
                      </div>
                      <div class="icon is-small is-left">
                        <i class="fal fa-map-marker-alt"></i>
                      </div>
                    </div>
                    <div class="control">
                      <a id="detach_site_dropdown" class="button is-dark">
                        <i class="fa fa-times" aria-hidden="true"></i>
                      </a>
                    </div>
                  </div>
                </td>
                
              </tr>
              
              <tr>
              
                <td></td><td></td><td></td>
                <td class="field">
                  <div class="field-body">
                    <div class="field is-grouped is-grouped-right">
                      <button class="button is-primary">Add Lot</button>
                    </div>
                  </div>
                </td>
                
              </tr>
              
            </form>
          </div> <!-- / lots fields -->