Question

In my website I have an option to add (multiple times) an input with a button, using this code,

$("#add_new_detail").click(function() { 
    $("#det_add_area").append('
        <div id="no_'+i+'"><table><tr><td> '+i+' </td><td> 
            <input type="text" name="det['+i+'][details]" /> </td><td> 
            <input type="text" name="det['+i+'][amount]" value="0" /> </td><td> 
            <input type="text" name="det['+i+'][price_real]" value="0" /> </td><td> 
            <input type="text" name="det['+i+'][price_user]" value="0" /> </td><td> 
            <input type="text" name="det['+i+'][total_price]" value="0" DISABLED  /> 
            </td><td> <input type="text" name="det['+i+'][total_price_for_user]" value="0" DISABLED  /> </td><td>
            <div class="delete_line" onClick="re(\'no_'+i+'\')"> delete </div></td></tr></table></div>
  '); 
  i++; 
});

Now, every time I click the button it really creates a new line of inputs. That is working perfect.
Now I’m trying to calculate between the inputs, I’m trying to enter a number into

det[‘+i+’][amount]

and to double it with (math)

det[‘+i+’][price_real]

and to post the result in

det[‘+i+’][total_price]

now I have no idea how can I interact with these specific fields(which getting created by the button click) – every line has it own amount,price_real,total_price … how can I make this calculate with onKeyUp ?
if someone can give me an idea how am I moving on from this point I’ll be grateful.

thanks 🙂

Answer 1

Here you go… I have modified the name attribute to id. Also used _ instead of [.

Live Demo

Whenever you change amount or price_real, the corresponding total_price will change (total_price = amount * price_real).

jQuery

$("#add_new_detail").on("click", function() { 
    $("#det_add_area").append('<div id="no_'+i+'"><table><tr><td> '+i+' </td><td> \
            <input type="text" id="det_'+i+'_details" /> </td><td> \
            <input type="text" id="det_'+i+'_amount" value="0" /> </td><td> \
            <input type="text" id="det_'+i+'_price_real" value="0" /> </td><td> \
            <input type="text" id="det_'+i+'_price_user" value="0" /> </td><td> \
            <input type="text" id="det_'+i+'_total_price" value="0" DISABLED  /> \
            </td><td> <input type="text" id="det_'+i+'_total_price_for_user" value="0" DISABLED  /> </td><td>\
            <div class="delete_line" onClick="re(\'no_'+i+'\')"> delete </div></td></tr></table></div>\
    '); 

    $("#det_" + i + "_amount").on("change", function() { 
        calculate(this); 
    });

    $("#det_" + i + "_price_real").on("change", function() { 
        calculate(this); 
    });

    i++;
});

function calculate(e) {
    j = $(e).attr('id').split("_")[1]
    total = $("#det_" + j + "_amount").val() * $("#det_" + j + "_price_real").val();
    $("#det_" + j + "_total_price").val(total);
}