У меня есть пользовательская форма, добавленная в моем представлении, и я не могу получить более 1 данных формы, когда я отправляю данные в контроллер, мне нужно отправить массив данных.

ДД

Это то, что я отправляю в настоящее время:

array:7 [
  "_token" => "ZMyuEaT3SJpdwo7toCUA95zNxjSfzDn9G6xSm7G0"
  "title" => "ujykuyl"
  "type" => "color"
  "vals" => "fgj"
  "sku" => "gj"
  "price" => "47"
  "color" => "547457"
]

Вот что должно быть:

array:7 [▼
  "_token" => "ZMyuEaT3SJpdwo7toCUA95zNxjSfzDn9G6xSm7G0"
  "title" => "ujykuyl"
  "type" => "color"
  "vals" => array:2 [▼
    0 => "fgj"
    1 => "hstghtrh"
  ]
  "sku" => array:2 [▼
    0 => "gj"
    1 => "36457"
  ]
  "price" => array:2 [▼
    0 => "47"
    1 => "676484"
  ]
  "color" => array:2 [▼
    0 => "547457"
    1 => "537637"
  ]
]

Код

All parts are commented in codes below so you can understand what each part does.

<div id = "buildyourformaddtitl">
    // title
    <div class = "col-md-4 mt-20">
        {{Form::label('opttitle', 'Group Title')}}
        {{Form::text('opttitle', null, array('class' => 'form-control'))}}
    </div>
    // group type
    <div class = "col-md-4 mt-20">
        {{Form::label('opttype', 'Group Type')}}
        <select name = "opttype" id = "opttype" class = "form-control">
            <option value = "">-- Select --</option>
            <option value = "dropdown">DropDown</option>
            <option value = "radio">Radio</option>
            <option value = "color">Color/Texture</option>
        </select>
    </div>
</div>
<div class = "col-md-4 mt-20">
    {{Form::label('addtitl', 'Add Values')}}
    <br>
    //adding value inputs to view (unlimited)
    //PS: this values must be send as array
    <input type = "button" value = "Add values" class = "btn btn-success addtitl" id = "addtitl" />

    //saving data
    <button type = "button" class = "optsave btn btn-danger">
        Save
    </button>
</div>

JavaScript

Note: I already made this data to be as array by adding [] in each field name. The only issue is to get all of them by JavaScript. (currently my JS code only gets first row)

<script>
    $(function(){
        // add values to view (unlimetd)
        $("#addtitl").click(function() {
            var lastField = $("#buildyourformaddtitl div:last");
            var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
            var fieldWrapper = $("<div class=\"col-md-8 mt-20\" id=\"field" + intId + "\"/>");
            fieldWrapper.data("idx", intId);
            var fName = $("<label for=\"optvals\">Value</label><input type=\"text\" name=\"optvals[]\" class=\"form-control optvals\" />");
            var fSku = $("<label for=\"optsku\">SKU</label><input type=\"text\" name=\"optsku[]\" class=\"form-control optsku\" />");
            var fPrice = $("<label for=\"optprice\">Price</label><input type=\"text\" name=\"optprice[]\" class=\"form-control optprice\" />");
            var fColor = $("<label for=\"optcolor\">Color</label><input type=\"text\" name=\"optcolor[]\" class=\"form-control optcolor\" />");
            var removeButton = $("<button type=\"button\" class=\"btn btn-danger\"><i class=\"fa fa-minus\"></i></button>");
            removeButton.click(function() {
                $(this).parent().remove();
            });
            fieldWrapper.append(fName);
            fieldWrapper.append(fSku);
            fieldWrapper.append(fPrice);
            fieldWrapper.append(fColor);
            fieldWrapper.append(removeButton);
            $("#buildyourformaddtitl").append(fieldWrapper);
        });
        // send data to controller
        $(".optsave").on("click", function(e){
            e.preventDefault();
            var form = $(this).closest('form');
            $.ajax({
              type: "post",
              url: "{{ url('admin/optionsStoreAjax') }}",
              data: {
                '_token': $('input[name=_token]').val(),
                'title': $(this).closest('form').find('#opttitle').val(),
                'type': $(this).closest('form').find('#opttype').val(),
                'vals': $(this).closest('form').find('.optvals').val(),
                'sku': $(this).closest('form').find('.optsku').val(),
                'price': $(this).closest('form').find('.optprice').val(),
                'color': $(this).closest('form').find('.optcolor').val(),
              },
              success: function (data) {
                alert(data);
              },
              error: function (data) {
                console.info('Error!', data);
              }
            });
        });
        //end sending data
    });
</script>

Вопрос

Как мне получить массив всех моих добавленных полей?