Dynamic Input Field Values Are Not Calculating The With The Right Value

I am using Codeignator. My HTML output which is correct for me. Now What I am doing is, the user will enter the name of the medication, no of pills and amount so that based on the

Solution 1:

It also seems you had a bug on the removal/add action. If you had the case where you add 4 items, so

• 1 (initial)
• 2,3,4 (dynamically generated)

and then decide to remove the 2. You decrease x by one, witch give you x=3 and the row 1,3,4. If now, you add a new item, you get x+1 and so the collection 1,3,4,4.

To avoid this pattern, It's maybe a good idea to use the current time (at the add execution time) to generate an identifiant to your row.

Since you are working on the HTML contained in a "add_row" div, you can use it as a referent. Instead of using the "n" value received by your increase/decrease click event, you can get the .parents(".add_row") and then select the .find('.single_price') or .find('.total_p_price') easily

Another approche would be to use a "data-" parameter or a class allowing you to identify easily the current row where you are working. I probably use something like that :

<divclass="custom_fields"data-time="1540021654"><!-- current time on the dynamically added row --><inputtype="text"name="medication_name[]"data-time="1540021654"class="medication_name"><spanclass="value-button"data-time="1540021654"onclick="decreaseValue"value="Decrease Value">-</span><inputtype="number"data-time="1540021654"class="qty_member"value="0"name="qty_member[]" /><spanclass="value-button"data-time="1540021654"class="increase_name"onclick="increaseValue">+</span><br /><inputtype="text"class="form_control"data-time="1540021654"name="single_price[]"class="single_price"  /><inputtype="text"class="form_control"data-time="1540021654"name="total_p_price[]"class="total_p_price" /><divclass="btn_row remove_field"><span> - </span> Remove  </div></div>

(I have simplify a little the html for easily find my changes) With this and jquery, you can find instant all the data you want and update it $('.single_price data[time="1540021654"]').val() will give you this result and only it.

Another mistake is, you are generating buttons with an id static, like <span class="value-button" id="increase" onclick="increaseValue('+ x +')" value="Increase Value"> This is a mistakes because id should be Unique.

Solution 2:

$("body").on('keyup', 'input[id^=total_p_price]', function() {
  //$('input[id^=single_price]').prop('disabled', true);var that = $(this); // CHANGE HEREvar  total_p_price= that.val();
    var qty_number = that.siblings().find("input[id^=number]").val();
    console.log(qty_number);
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="add_row"><inputtype="text"name="medication_name[]"id="medication_name"class="form_control text_cap"placeholder="medication_name"><spanclass="value_button"id="decrease"onclick="decreaseValue(1)"value="Decrease Value">-</span><inputtype="number"id="number1"class="qty_number form_control"name="qty_number[]"value="0"class="form_control"/><spanclass="value_button"id="increase"onclick="increaseValue(1)"value="Increase Value">+</span><inputtype="text"class="form_control"name="single_price[]"id="single_price"placeholder="single price" /><inputtype="text"class="form_control"name="total_p_price[]"id="total_p_price"placeholder="total price" /><divclass="btn_row add_row_click"><span> +  </span> Add </div></div><divclass="add_row"><inputtype="text"name="medication_name[]"id="medication_name"class="form_control text_cap"placeholder="medication_name"><spanclass="value_button"id="decrease"onclick="decreaseValue(1)"value="Decrease Value">-</span><inputtype="number"id="number1"class="qty_number form_control"name="qty_number[]"value="0"class="form_control"/><spanclass="value_button"id="increase"onclick="increaseValue(1)"value="Increase Value">+</span><inputtype="text"class="form_control"name="single_price[]"id="single_price"placeholder="single price" /><inputtype="text"class="form_control"name="total_p_price[]"id="total_p_price"placeholder="total price" /><divclass="btn_row add_row_click"><span> +  </span> Add </div></div>

I can answer first two, for the third question, there is not much info to go on. For 3, are you getting any error? First two questions have similar issue

The issue is in the following syntax $('input[id^=single_price]').val(html);

What that does is it selects all the inputs in the dom that match the criteria. In your case you have two inputs that match the criteria and hence both are updated. You need to choose only the one that are in the same row. You can do that using the siblings function that Jquery provides. Change your function in the following way

$("body").on('keyup', 'input[id^=total_p_price]', function() {
  //$('input[id^=single_price]').prop('disabled', true);var that = $(this); // CHANGE HEREvar  total_p_price= that.val();
    var qty_number = that.siblings('input[id^=number]').val(); // selects only the one closest to it
    $.ajax({
        type  : "POST",
        url: baseUrl + "/Customer_control/calculate_total_p_price",
        data: {total_p_price: total_p_price,qty_number:qty_number},
        cache : false,
        success: function(html) {
          //alert(html);
          that.siblings('input[id^=single_price]').val(html); 
        }
      });
});