Проблема клона продукта JS с массивом входных имен в Laravel & Bulma

Question

У меня есть бланк страницы заказа с разделом клонов, который почти работает правильно, однако он добавляет идентификаторы и атрибуты в группу элементов div, которые мне не нужны.Jquery не моя сила, поэтому мне нужно немного помочь, чтобы понять это правильно.

Мне нужны атрибуты имени для секций флажков (также скрытые флажки), чтобы иметь значение возрастающего массива, чтобы первый продукт div имел понедельник[0], вторник [0], среда [0] ..., а затем следующие клонированные флажки имеют понедельник [1], вторник [1], среда [1]

Массив дней

array:7 [▼
0 => "Monday"
1 => "Tuesday"
2 => "Wednesday"
3 => "Thursday"
4 => "Friday"
5 => "Saturday"
6 => "Sunday"
]

HTML

<div id="products" class="field">
                    <div id="product0" class="product m-b-20">            
                          <div class="field is-horizontal">
                                <div class="field-body">
                                      <div class="field is-expanded">  
                                            <label class="label">Purchase</label>
                                            <div class="select is-fullwidth">
                                            {!! Form::select('purchase_id[]', $products, null, ['class' => 'input purchase_dropdown', 'id' => 'purchases']) !!}      
                                            </div>
                                      </div>

                                      <div class="field" id="mode_1">
                                            <label class="label">Mode</label>
                                            <div class="select is-fullwidth">
                                            <select name="delivery_mode[]" class="delivery_mode">
                                            <option value="0" selected="selected">Mode 1</option>
                                            <option value="1">Mode 2</option>
                                            <option value="2">Mode 3</option>
                                            <option value="3">Mode 4</option>
                                            <option value="4">Mode 5</option>
                                            </select>
                                            </div>
                                      </div>

                                      <div class="field is-expanded">
                                            <label class="label">Cost</label>
                                            <input class="input product_cost_text_field qty1" placeholder="Cost" type="number" step="0.01" name="cost[]"/>
                                      </div>
                                </div>
                          </div>

                          <div class="field is-horizontal">
                                <div class="field-body">
                                      <div class="columns">
                                            <div class="column">
                                                  <div class="field">
                                                        <div class="control">
                                                              <label class="label" for="is-gov-funded">Discount</label>
                                                              <div class="select is-fullwidth">
                                                              <select name="gov_funding[]" class="gov_funding" id="gov_funding">
                                                              <option value="" >-</option>
                                                              <option value="Discount 1">Discount 1</option>
                                                              <option value="Discount 2">Discount 2</option>
                                                              </select>
                                                              </div>
                                                        </div>
                                                  </div>
                                            </div>
                                            <div class="column">
                                                  <div class="field">
                                                        <div class="control">
                                                              <label class="label">Discount Amount</label>
                                                              <input class="input discount_amount" placeholder="Discount Amount" type="number" step="0.01" name="discount_amount[]">
                                                        </div>
                                                  </div>
                                            </div>
                                            <div class="column">
                                                  <div class="field">
                                                        <div class="control">
                                                              <label class="label has-text-white m-b-20">Discount Status</label>
                                                              <input class="is-checkradio is-info" type="checkbox" id="gov_funding_status_checkbox" name="discount_status[]" value="1">
                                                              <label class="label" for="discount_status_checkbox">Approved</label>
                                                              <input type="hidden" name="discount_status[]" id="discount_status_checkbox_hidden" value="0" class="is-checkradio">

                                                        </div>
                                                  </div>
                                            </div>
                                      </div>
                                </div>
                          </div>

                          <div class="hidden" style="display:none;">
                                <div class="columns p-t-20">
                                      <div class="column is-half">
                                            <h3 class="subtitle is-info"><span class="icon p-b-10 m-r-10"><i class="fa fa-university"></i></span>Location Information</h3>
                                            <div class="field is-horizontal">
                                                        <div class="field-label is-normal" id="location">
                                                              <label class="label">Campus</label>
                                                        </div>
                                                        <div class="field-body">
                                                              <div class="select is-fullwidth">
                                                              {!! Form::select('location[]', $locations, null, ['class' => 'input location_name_dropdown']) !!}
                                                              </div>
                                                        </div>

                                            </div>
                                            <div class="field is-horizontal">
                                                        <div class="field-label is-normal" id="start_date">
                                                              <label class="label">Start</label>
                                                        </div>
                                                        <div class="field-body">
                                                              <input class="input course_cost_text_field" type="date" name="start_date[]"/>
                                                        </div>
                                            </div>
                                            <div class="field is-horizontal">            
                                                        <div class="field-label is-normal" id="start_time">
                                                              <label for="start_time" class="label">Start Time</label>
                                                        </div>
                                                        <div class="field-body">
                                                              <input class="input" type="time" name="start_time[]">
                                                        </div>
                                            </div>
                                            <div class="field is-horizontal"> 
                                                        <div class="field-label is-normal" id="end_time">
                                                              <label for="end_time" class="label">End Time</label>
                                                        </div>
                                                        <div class="field-body">
                                                              <input class="input" type="time" name="end_time[]">
                                                        </div>
                                            </div>            
                                      </div>
                                      <div class="column is-half">
                                            <div class="control m-b-30">
                                                  <label class="label" for="Deliver Days">Days</label>

                                                  @foreach($days as $day)

                                                  <div class="field days">
                                                  <input type="hidden" name='<?php echo $day; ?>[0]' id='hidden<?php echo $day; ?>_0' class="is-checkradio cloned_checkbox_hidden">
                                                  <input name="<?php echo $day; ?>[0]" id="<?php echo $day; ?>_0" value="1" type="checkbox" class="cloned_checkbox is-checkradio f_input is-link" />
                                                  <label for="<?php echo $day; ?>_0"><?php echo $day; ?></label>

                                                  </div>
                                                  @endforeach
                                            </div>
                                      </div>
                                </div>
                          </div>
                          <div class="is-divider m-b-30 m-t-30" data-content=""></div>    
                    </div>
              </div>

              <!-- ADD/REMOVE PRODUCT BUTTONS -->

              <div class="field is-grouped">
                    <div id="remove-product" class="control">
                          <a id="rp" class="button  is-danger"><span 
                          class="icon is-small"><i class="fa fa-times"></i></span><span>Remove 
                          Product</span></a>
                    </div>

                    <div id="add-product" class="control">
                          <a id="ap" class="add button  is-primary" >
                          <span class="icon is-small"><i class="fa fa-plus"></i></span><span>Add 
                          Product</span></a>
                    </div>
              </div>

Спагетти JQUERY clone.js

Мне пришлось добавить подстрокуразделы, как я получал в понедельник [0] [1] [1] [1] [1] в скрытом атрибуте имени флажка, так что, очевидно, я делаю много неправильно, однако это работает, но везде добавляется идентификатор, которыйнет хорошего в долгосрочной перспективе

$(document).ready(function(){
var template = $('#products .product:first').clone();
var productsCount = 0;

window.addProduct = function(){
    productsCount++;
    var product = template.clone().find(':input, div').each(function(){

        var newId = this.id.substring(0, this.id.length-1) + productsCount;

        $(this).next().attr('for', newId); // update label for

        this.id = newId; // update id and name (assume the same)



        $(this).find(".cloned_checkbox_hidden").attr("name", function() { return $(this).attr("name").substring(0, this.id.length-8) + "["+productsCount+"]" });
        $(this).find(".cloned_checkbox").attr("name", function() { return $(this).attr("name").substring(0, this.id.length-2) + "["+productsCount+"]" });

    }).end()
    .attr('id', 'product' + productsCount)
    .appendTo('#products');

}
$('.add').click(addProduct);
$("a#rp").click(function () {
if ($(".product").length != 1) {
$(".product:last").remove();
}
event.preventDefault();
});
});