How can create a live multiplication using nested attributes and combobox option selected?

Question

I know that my question is really strange or doesn't make sense or will have points down but I investigated about this and didn't found an example about my demo.

I created a nested form so when I add a new row give me a long name like this

<input id="shopping_document_shopping_products_attributes_0_qty" name="shopping_document[shopping_products_attributes][0][qty]" size="9" type="text">
<input id="shopping_document_shopping_products_attributes_1_qty" name="shopping_document[shopping_products_attributes][1][qty]" size="9" type="text">
<input id="shopping_document_shopping_products_attributes_2_qty" name="shopping_document[shopping_products_attributes][2][qty]" size="9" type="text">
....
<input id="shopping_document_shopping_products_attributes_X_qty" name="shopping_document[shopping_products_attributes][X][qty]" size="9" type="text">

So I will have infinite rows but I'm trying to do a multiplication in each row with the amount selected and finally get the total sum

<input id="shopping_document_shopping_products_attributes_0_qty" name="shopping_document[shopping_products_attributes][0][qty]" size="9" type="text">

<option value="">Seleccione</option><option value="106">Impresora RG</option>
  <option value="107">Celular Galaxy J. Astete</option>
  <option value="108">Trapo</option></select>
</option>

Notice that name= "shopping_document[shopping_products_attributes][X][qty]" so It should be able to work more than 4 rows in the demo , the symbol X means that if I add a 5 row the live multiplication will work

Here is the example:

Here is the demo

Please somebody can help me to create this?

I will really appreciate all kind of help.

Don't be bad with me ,I'm just try to learn but didn't found an example with this case

A friend from stackoverflow gave me this demo but I'm using prototype 1.6.0.3 and jquery min 1.4.0 here in the demo works perfect but In production is making conflicts and showing errors and the rest of actions are not working correctly.

Here is the screenshoot

Answer 1

http://jsfiddle.net/bu8da52u/

$(document).ready(function(){
    var tbl = $("#products");
    //clone the first row for later duplication
    var tmplt = $(tbl).find("tr").eq(1).clone();

    //when add button is clicked add a row
    tbl.on("click", ".add", function(){
        tmplt.clone().appendTo(tbl);    });

    //when the remove button is clicked
    tbl.on("click", ".remove", function(){
        //Remove if there is more than just one row 
        if(tbl.find("tr").length > 2){
            $(this).closest("tr").remove();
        }
    });

    //calculate the sum
    tbl.on("change keyup", ".qty input, .product select, .cost select", function(){
        var sum = parseFloat($(this).parent().parent().find(".qty input").val()) * parseFloat($(this).parent().parent().find(".cost select").val());
        $(this).parent().parent().find(".sum input").val(sum.toFixed(2));
    });
});