I need help understanding this behaviour on my php page. I have a table with data fetched from a mysql database, and each row of this table has a button like this:

<button onclick='fillform(arg1, arg2, arg3)'>+</button>

which is invoking the following js function:

function fillform(arg1, arg2, arg3){
 document.getElementById('input1').value = arg1;
 document.getElementById('input2').value = arg2;
 document.getElementById('input3').value = arg3;
}

So everytime I press the button on that specific row, the data form that row are set as value of 3 input fields on the same page.

Everything works fine, but if I manually change the value of one of the inputs, when I press the button again from any row, that specific input field is not updated anymore from the fillform() function and is stuck with the value I typed.

the input fields don't have any other attributes set beside id, so they are like this:

<input type="text" id="input1">

Is there a way to make the function have precedence or am I missing something in the code? Thanks