A Problem with jQuery selector inside loop

by Akram kamal

HTML

<ul>
    <div id="P_01">
        <li>
            <p class="product-price">&euro; <span class="result">8</span></p>
            <form action="">
                <label>Quantity</label>
                <input type="number" id="P_01" class="deco" data-price="8" value="0" />
            </form>
        </li>
    </div>
    <div id="P_02">
        <li>
            <p>&euro; <span class="result">12</span></p>
            <form action="">
                <label>Quantity</label>
                <input type="number" id="P_02" class="deco" data-price="12" value="0" />
            </form>
        </li>
    </div>
    <div id="P_03">
        <li>
            <p class="product-price">&euro; <span class="result">17</span></p>
            <form action="">
                <label>Quantity</label>
                <input type="number" id="P_03" class="deco" data-price="17" value="0" />
            </form>
        </li>
    </div>

</ul>

CSS

ul {
    margin: 1.5em 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

li {
    float: left;
    width: 31%;
    margin: 0 1%;
    display: block;
}

.product-price {}

.deco {
    width: 40px;
    border: 1px solid #eee;
    font: 1em 'PT Serif', serif;
    background: #f9f9f9;
    color: #000;
    border-radius: 3px;
    margin-left: 0.4em;
}

JavaScript

$(document).ready(function() {
    "use strict"

    var $qty = $("input[id^='P_']");
    $qty.on('input', function() {
        var div = $(this).closest("div")
        var pricePerItem = $(this).data('price');
        var numberOfItem = $(this).val();
        var result = $(".result", div);
        var sum = numberOfItem * pricePerItem;
        console.log("l",pricePerItem, numberOfItem, sum)
        result.text(sum);
    });

});