Как получить и поместить значения этих конкретных полей, используя класс в Jquery

Question

Я пытаюсь получить значения из 2 входных тегов, а затем умножить их и поместить результат в третий входной тег.

Я успешно получил значение из входных тегов, но проблема в том, что я не могу получить конкретныйценности. Мне нужно использовать класс, так как моя главная цель - получить элементы корзины, используя цикл foreach. Я попытался использовать ключевое слово $ (this), но не смог.

HTML:

price :<input type="text" class="inp" value=45>
quantity: <input type="text" class="inp-text" placeholder="enter a number" >
total:<input type="text" class="result" placeholder="result"><br><br>

price :<input type="text" class="inp" value=10>
quantity: <input type="text" class="inp-text" placeholder="enter a number" >
total:<input type="text" class="result" placeholder="result"><br><br>

price :<input type="text" class="inp" value=29>
quantity: <input type="text" class="inp-text" placeholder="enter a number" >
total:<input type="text" class="result" placeholder="result"><br><br>

Jquery

$(".inp-text").keyup(function() {
    console.log("key action");
    var key1 = $(this).val();
    // I want the value of this specific input class .inp and .inp-text
    $(".inp").attr("value", function() {
        var key2 = $(this).val();
        console.log(key1);
        console.log(key2);
        // multiply those values and then display it in result class
        var ress = key1 * key2;
        $(".result").val(ress);
    });
});

Я хочу отобразить умножение цены и количества вполе результата. например. при изменении входных данных 2-й строки на 5 в столбце результатов должно получиться 50.

10 * 5 = 50

Answer 1

Вам нужно использовать индекс элемента относительно других с тем же классом (используйте селектор в функции индекса).

var index = $(this).index(".inp-text");

Код в этой скрипте поможет:

$(".inp-text").keyup(function() {
    console.log("key action");
    var index = $(this).index(".inp-text");
    var key1 = $(this).val();
    // I want the value of this specific input class .inp and .inp-text
    $(".inp:eq("+index+")").attr("value", function() {
        var key2 = $(this).val();
        console.log(key1);
        console.log(key2);
        // multiply those values and then display it in result class
        var ress = key1 * key2;
        $(".result:eq("+index+")").val(ress);
    });
});

https://jsfiddle.net/52Lvmtdr/