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

Question

[Данил Остапенко]

Доброго времени суток, подскажите пожалуйста, у меня есть блок .addserviceList в котором находятся блоки .addserviceBlock и внутри находятся два input ( с разными class ) :

Пример:

<div class="addserviceList">
    <div class="addserviceBlock">
        <input type="text" class="addservice" name="addservice" placeholder="Наименование услуги">
        <input type="text" class="addprice" name="addprice" placeholder="Цена">
    </div>

    <div class="addserviceBlock">
        <input type="text" class="addservice" name="addservice" placeholder="Наименование услуги">
        <input type="text" class="addprice" name="addprice" placeholder="Цена">
    </div>

    <div class="addserviceBlock">
        <input type="text" class="addservice" name="addservice" placeholder="Наименование услуги">
        <input type="text" class="addprice" name="addprice" placeholder="Цена">
    </div>
</div>

<button id="step1">Создать заказ</button>

Количество addserviceBlock разное ( они динамически добавляются \ удаляются ). На клик по #step1 будет срабатывать сбор данных по всем в многомерный массив:

$("#step1").on("click", function (event) {
    event.preventDefault();

/* Формирование многомерного массива JS для передачи AJAX*/
    
});

Вопрос, как собрать данные в многомерный массив ( для последующей передачи сюриализованного массива ?

Пример:

var service = [
        ['Услуга 1', '100'],
        ['Услуга 2', '50'],
        ['Услуга 3', '90'],
    ];

Answer 1

[0xD34F]

const selectors = [ '.addservice', '.addprice' ];
const data = Array.from(
  document.querySelectorAll('.addserviceBlock'),
  n => selectors.map(m => n.querySelector(m).value)
);

Comments

[Данил Остапенко]

Интегрировал Ваш код, проверяю через console.log(data); или console.table(data);
Выводит пустой массив ( если я правильно понял [] ).
Попробовал сериализовать массив:

temp = JSON.stringify(date);
console.log(temp);

Результат тот же, на всякий случай перевесил на кнопку onclick='stepOne(this)' и стартую через функцию:

function stepOne(i){

    const selectors = [ '.addservice', '.addprice' ];
    const data = Array.from(
        document.querySelectorAll('.addserviceBlock'),
        n => selectors.map(m => n.querySelector(m).value)
    );

    console.log(data);
}

( подумал мб из за динамических элементов ), но результат такой же, подскажите, в какую сторону копать ?

[0xD34F]

Данил Остапенко, копайте куда хотите. Гадать о том, где вы косячите, я не буду.

[Данил Остапенко]

0xD34F, понял Вас, в любом случае благодарю за ответ.

[Данил Остапенко]

0xD34F, в принципе как я и предполагал, проблема заключалась, что я идиотина и когда писал пример addserviceBlock указал как класс, а у меня в рабочем коде это id. Ваш код полностью рабочий, получаю результат все как надо! Еще раз благодарю!

[Alfieros]

0xD34F, он всё верно написал. Вызывать гадалку никто не будет, где вы там очепятались. Даже без неё, он вас правильно понял. Ему можно доверять на все 99%, 1% оставим погрешностям))))