Добрый день, я снова с вопросом именно к вам.
На JS - начал работать не так давно, хотелось бы узнать, есть ли возможность записывать данные в переменную, скорее всего в массив, не совсем понимаю как это работает.
В общем есть код модалки, куда должны падать товары
<div class="card">
<div class="image_wrapper">
<img src="/images/buggi/1.jpg" class="image" alt="buggi">
<img src="/images/buggi/2.jpg" class="other_image" alt="buggi">
</div>
<div class="product_info">
<div class="product_title">
<h2 data-art="Y1-291-BLUE">Коляска-трансформер BaoBaoHao Y1-291-BLUE</h2>
</div>
<div class="product_description">
<p>Производитель: <span>BaoBaoHao</span></p>
<p>Комплект: <span>Коляска-трансформер, москитная сетка, корзина для багажа.</span></p>
<p class="desc">Складывается до размеров ручной клади в самолет, отделение для перевозки вещей, пятиточечный ремень безопасности, 4 амортизатора, съемные колеса, складывание одной рукой, откидной бампер, дополнительное увеличение длины козырька, окошко для наблюдения за ребенком.</p>
</div>
<div class="product_cost">
<p data-cost-id="1">4 144 р.</p>
</div>
</div>
</div>
<div class="placeOrder">
<div class="orderBg"></div>
<div class="close"><span></span><span></span></div>
<div class="inner_wrapper">
<div class="order_info">
<div class="order_title">
<h2>Ваш заказ</h2>
</div>
<div class="prev_buggy">
<div class="image_wrapper"><img src="" alt="previmg"></div>
<div class="buggy_name">
<p></p>
<span class="article"></span>
</div>
<div class="count">
<p>1</p>
<span class="minus">-</span><span class="plus">+</span>
</div>
<div class="cost">
<p data-count='4144'>4 144</p>
<span class="delete"></span>
</div>
</div>
<div class="total_cost">
<p class="cost">Сумма: 4 144 р.</p>
</div>
</div>
<div class="form_wrapper">
<form method="POST">
<input type="hidden" class="buggy_name">
<input type="hidden" class="buggy_art">
<input type="hidden" class="buggy_cost">
<input type="hidden" value="1" class="buggy_count">
<label for="">
<span>Ваше имя</span>
<input type="text" name="name">
</label>
<label for="">
<span>Ваш Email</span>
<input type="mail" name="email">
</label>
<label for="">
<span>Ваш телефон</span>
<input type="tel" name="tel">
</label>
<button>Оформить заказ</button>
</form>
</div>
</div>
</div>
Обработчик может быть кривой, но какой написал...
$('.card').click(function(event) {
var imageURLMain = $(this).children().children().attr('src');
var titleCard = $(this).children().next().children().children('h2').text();
var art = $(this).children().next().children().children().data('art');
var cost = $(this).children().next().children('.product_cost').text();
var desc = $(this).children().next().children().children('.desc').text();
$('.placeOrder .prev_buggy .image_wrapper img').attr('src', imageURLMain);
$('.placeOrder .prev_buggy .buggy_name p').html(titleCard);
$('.placeOrder .prev_buggy .buggy_name span').html('Артикул: '+art);
$('.placeOrder .prev_buggy .cost p').html(cost);
$('.placeOrder .total_cost p').html('Сумма: '+cost);
$('.placeOrder .prev_buggy .cost p').data('cost', cost);
$('.buy_buggy .info p.desc').html(desc);
$('input.buggy_name').val(titleCard);
$('input.buggy_art').val(art);
$('input.buggy_cost').val(cost);
});
Сейчас при клике на карточку(.card) в модалке создаётся один товар, по которому мы кликнули.
Нужно сделать так, чтобы данные о товаре записывались в массив и сохранялись, чтобы при клике этот товар не обновлялся, а вниз добавлялся ещё один - новый товар.
Ну и желательно, чтобы создавалось ещё 4 инпута, где уже будут новые данные о втором товаре, это для отправки на почту.
Знаю, что лучше подключить какой-нибудь woocommerce, но клиент привык делать так и хочет, чтобы оставалось так же.
Заранее спасибо, за предложенные варианты. 
