<input> in modal is showing wrong values

Question

I have reduced my original question to a simpler example that can be reproduced on JS Fiddle.

I have a modal dialog (#popup) that contains some <input>s decorated with the class V:

<input class="V" type="number" />
<input class="V" type="text" />

I have a button that sets the value attribute of each <input> to some value and launches this modal:

<button onclick="edit();">Edit</button>

<script>
  edit = () => {
    const inputs = $(".V");
    inputs[0].setAttribute("value", "999");
    inputs[1].setAttribute("value", "998");
    $("#popup").modal("show");
  }
</script>

In the modal, if I change the value of an <input> element and close it, the next time I launch it again, the <input> shows the changed value instead of the explicitly set value, 999 or 998.

Why is this happening?

The problem is not there if the modal contains a single <input> and I use jQuery's .val() method to set the value.

Answer 1

So you need to set each individually, here's the jQuery version

edit = () => {
  const inputs = $(".V");
  $(inputs[0]).val(999)
  $(inputs[1]).val("999")
  $("#popup").modal("show");
}

--- old solution--- This is jQuery, you can just do:

edit = () => {
  const inputs = $(".V");
  inputs.val(999);
  $("#popup").modal("show");
}