Get dynamic id when keyup triggering using jquery/javascript

Question

I have dynamically showing product list with price and quantity in text box, i want to calculate product total price when enter the quantity.I have done this by onclick when increase or decrease button.but i also need to calculate the total price when key up quantity textbox

My code is like

<div id="gw_articles">
    <div id="article_list">
        <p>
            <div id="article_1_element">
                <input type="text" id="jform_article_1_name" name="jform[article_1][name] " value="Spark plug ARH-II AIW16 IRIDIUM+" disabled="disabled" size="35" /> <a id="jform_article_1_modal">Select an product</a>

                <input type="hidden" id="jform_article_1_id" name="jform[article_1][id]" value="2" />
                <input type="hidden" name="jform[article_1][price]" id="jform_article_1_price" value="30.00" class="inputbox" />
                <input type="text" name="jform[article_1][price_total]" id="jform_article_1_price_total" value="90" class="inputbox" size="10" />
                <input type="text" name="jform[article_1][quantity]" id="jform_article_1_quantity" value="3" class="inputbox" size="10" />
                <input type="button" class="btn" value="+" onclick="document.id('jform_article_1_quantity').value++; calculateTotalPrice('jform_article_1')" />
                <input type="button" class="btn" value="-" onclick="if(document.id('jform_article_1_quantity').value >1)document.id('jform_article_1_quantity').value--; calculateTotalPrice('jform_article_1')" /> 
                <a title="test" class="btn btn-danger" onclick="removeElement('article_1_element')"> Delete </a>
            </div>
        </p>
        <p>
            <div id="article_2_element">
                <input type="text" id="jform_article_2_name" name="jform[article_2][name] " value="Spark plug ARH-II AIW20 IRIDIUM+" disabled="disabled" size="35" /> <a id="jform_article_2_modal" class="btn modal" title="Select an product">Select an product</a>

                <input type="hidden" id="jform_article_2_id" name="jform[article_2][id]" value="1" />
                <input type="hidden" name="jform[article_2][price]" id="jform_article_2_price" value="40.00" class="inputbox" />
                <input type="text" name="jform[article_2][price_total]" id="jform_article_2_price_total" value="40" class="inputbox" size="10" />
                <input type="text" name="jform[article_2][quantity]" id="jform_article_2_quantity" value="1" class="inputbox" size="10" />
                <input type="button" class="btn" value="+" onclick="document.id('jform_article_2_quantity').value++; calculateTotalPrice('jform_article_2')" />
                <input type="button" class="btn" value="-" onclick="if(document.id('jform_article_2_quantity').value >1)document.id('jform_article_2_quantity').value--; calculateTotalPrice('jform_article_2')" /> 
                <a title="test" class="btn btn-danger" onclick="removeElement('article_2_element')"> Delete </a>
            </div>
        </p>
    </div>
    <input type="hidden" id="articles_max" name="articles_max" value="2" />
</div>

Answer 1

I sloved it by

      `jQuery(document).ready(function($) {
       jQuery("input[id*='quantity']" ).focusout(function(){
    max_value = $("#articles_max").val();
    var n =1;
        jQuery("input[id*='quantity']" ).each(function(){
    if (n <= max_value) {
    id='jform_article_'+n;
    calculateTotalPrice(id);
   n++;
   }
    })     
    })  
     });
    function calculateTotalPrice(field){

            var price = document.id(field + "_price").value;
            var quantity = document.id(field + "_quantity").value;
            document.id(field + "_price_total").value = price * quantity; 
        }`