Как получить значения из нескольких input формы в jQuery?

Помогите добавить несколько полей ввода <input> и с выводом этих полей.

Есть у меня форма отправки:

<form action="" method="post">
    <input name="qnt"/>  // Кол-во товара
    <input id="<?=$row['id']?>" /> //ИД товара
    <span class="in-da-cart" id="y-cart<?=$row['id']?>">
        В корзину
    </span> // кнопка добавления товара в корзину
</form>

ID у кнопки - это для того, чтобы срабатывала анимация только по нажатию на эту кнопку. Потому что на одной странице может быть несколько товаров. Вот сама анимация кнопки:

var cartid = '#y-cart'+id;

$(cartid).text('Добавлено').animate({
    opacity: 0.75
}, 2000, function() {
    $(this).animate({
        opacity: 1.00
    }).text('В корзину');
});

Форма улетает на скрипт:

(function($){
    $(function(){
        $(".in-da-cart").click(function() {
            var parent = $(this).parent();
            var parent1 = parent.parent();
                
            var id = parent.find('input').attr('id');

            var qnt = parent1.find('input').val(); 
                
            $.ajax({
                url: location.href,
                dataType : "html",  
                cache: false,
                type: "POST",
                data: {
                    id: id, 
                    qnt: qnt
                },
                success: function(data){
                    alert('Товар добавлен' + ' ' + id + ' ' + qnt )
                }

            });
        })
    })
(jQuery);

Ловится форма:

if(isset($_POST['id'])){
    $_POST['id'];
    $_POST['qnt']
}

Вопрос: так как я в js только самостоятельно начинаю разбираться, то есть я дуб-дерево, помогите сделать следующее. Мне нужно добавить 2 <input>'а к каждому товару, а именно ширину и длину изделия и сделать ID товара такого вида: ид-ширина-длина (234-7-4) для того, чтобы можно было в корзину добавить один и тот же товар, но с разными размерами, цветом и тд. и + такой продублировать "новый" id для кнопки.

Или еще вариант, как по мне более правильный: Оставить всё как есть, но в форму добавить два поля, ту же ширину и длину. Я не знаю просто, как их передать и словить. Я не понимаю тут:

var parent = $(this).parent();
var parent1 = parent.parent();
        
var id = parent.find('input').attr('id');

var qnt = parent1.find('input').val(); 

Как в скрипт сюда добавить 2 value, точнее вытащить их?

var width =
var height =

Ответы (0 шт):