Добавление модификаторов товара

В основной форме создал блок для добавления модификаторов товара
https://yadi.sk/i/bjxz7zZK51urUg
При клике по кнопке добавляется строчка в таблице.
Мне надо получить массив этих значений и получить их в специальном методе?
Массив нужен вида
$data = [
'modif' => [
[
'color' => 'Желтый',
'price' => '200',
],
[
'color' => 'Синий',
'price' => '100',
],
]
];

Где-то немного недопонимаю аякс. Кто сможет помочь?
А еще надо учесть, что админ может удалить ненужные параметры, а значит массив обновится

Скрипт следующий:

$('#modifiere').click(function (e){
e.preventDefault();
let $data = [];
// Получаем значения всех инпутов
$('#modifiere').closest('.main').find('input').each(function() {
$data[this.name] = $(this).val();
});
// Отправляем запрос на сервер
$.ajax({
url: adminpath + $('#modifiere').data('url') + '?mod-color=' + $data['mod-color'] + '&mod-price=' + $data['mod-price'],
data: $data,
// dataType: 'json',
complete: function(response){
$('#modifiere').closest('.main').find('.overlay').css({'display':'block'});
},
success: function(data){
setTimeout(function(){
$('#modifiere').closest('.main').find('.overlay').css({'display':'none'});
$('.' + $('#modifiere').data('name')).append('<tr>' +
'<td>' + $data['mod-color'] +'</td>' +
'<td>' + $data['mod-price'] +'</td>' +
'<td><a class="btn btn-danger btn-sm" href="#">\n' +
' <i class="fas fa-trash">\n' + '</i>\n' + 'Удалить\n' +
' </a>\n' +
' </td>' +
'</tr>');
}, 1000);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});

 

Для того, чтобы получить массив значений из добавленных строк таблицы, можно использовать следующий подход:

1. Создать пустой массив.
2. Обойти все строки таблицы, кроме заголовка, и для каждой строки:
a. Создать объект с двумя свойствами: `'color'` и `'price'`.
b. Записать в свойство `'color'` значение ячейки таблицы с индексом 0 (первая ячейка строки).
c. Записать в свойство `'price'` значение ячейки таблицы с индексом 1 (вторая ячейка строки).
d. Добавить созданный объект в массив.
3. Использовать полученный массив в нужном методе.

Пример

Код:

```javascript
// Функция для получения массива значений из таблицы
function getModifierData() {
  const data = [];
  $('.' + $('#modifiere').data('name') + ' tr:not(:first-child)').each(function() {
    const color = $(this).find('td:eq(0)').text().trim();
    const price = $(this).find('td:eq(1)').text().trim();
    data.push({ 'color': color, 'price': price });
  });
  return data;
}

// Обработчик клика по кнопке
$('#modifiere').click(function(e) {
  e.preventDefault();
  const $data = {};
  // Получаем значения всех инпутов
  $('#modifiere').closest('.main').find('input').each(function() {
    $data[this.name] = $(this).val();
  });
  // Отправляем запрос на сервер
  $.ajax({
    url: adminpath + $('#modifiere').data('url') + '?mod-color=' + $data['mod-color'] + '&mod-price=' + $data['mod-price'],
    data: $data,
    // dataType: 'json',
    complete: function(response) {
      $('#modifiere').closest('.main').find('.overlay').css({ 'display': 'block' });
    },
    success: function(data) {
      setTimeout(function() {
        $('#modifiere').closest('.main').find('.overlay').css({ 'display': 'none' });
        $('.' + $('#modifiere').data('name')).append('<tr>' +
          '<td>' + $data['mod-color'] + '</td>' +
          '<td>' + $data['mod-price'] + '</td>' +
          '<td><a class="btn btn-danger btn-sm" href="#">\n' +
          ' <i class="fas fa-trash">\n' + '</i>\n' + 'Удалить\n' +
          ' </a>\n' +
          ' </td>' +
          '</tr>');
        // Обновляем массив значений
        const modifierData = getModifierData();
        console.log(modifierData); // Выводим массив значений в консоль
      }, 1000);
    },
    error: function(xhr, ajaxOptions, thrownError) {
      alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
  });
});

```

Здесь мы добавили функцию `getModifierData()`, которая обходит все строки таблицы, кроме заголовка, и создает для каждой строки объект с двумя свойствами: `'color'` и `'price'`. Затем мы добавили вызов этой функции внутри обработчика клика по кнопке после добавления новой строки в таблицу.

Обратите внимание, что вместо `$data` для хранения массива значений мы использовали обычный массив `data`, так как `$data` используется для хранения значений инпутов. Если вы хотите использовать `$data` для хранения массива значений, то можно заменить `const data = []` на `const data = $data.modif || []`, чтобы использовать уже существующий объект `$data.modif`, если он есть, или создать новый пустой массив.