Question

I have a number of

<input type="text" name="price[]" value="100">
<input type="text" name="price[]" value="50">
<input type="text" name="price[]" value="10">
<input type="text" name="price[]" value="90">

I also have a input field

<input type="text" name="Add" value="">

I want

1. each price[] input field to have their own Addition Button next to it that will get the value from that specific price[] input field
2. add the value from the Add input field to it
3. update the value of that specific price[] input field in the end

How can I do that?

Answer 1

to iterate through the price[]-boxes for adding buttons right to them and set the value from price[] to the button, do it like this

<input type="text" name="price[]" value="100">
<input type="text" name="price[]" value="50">
<input type="text" name="price[]" value="10">
<input type="text" name="price[]" value="90">

<script type="text/javascript">
$(document).ready(function() {
    $('input[name="price[]"]').each(function(i) {
        $(this).after('<button class="additionButton" price="'+$(this).val()+'">'+$(this).val()+'</button>');
    });
    //click
    $(".additionButton").on('click',function() {
        //original price, set on load
        alert($(this).attr('price'));
        //price in the input-field before the button (could be changed, think this is the idea)
        alert($(this).prev('input').val());
    });
});
</script>

for the rest, i am not sure what you mean, “Add” has no value and you seriously want some kind of calculation? But try yourself, here was at least the iteration.