How to Get value and Id of dynamic created textbox

Hello I have script which creates dynamic textbox.

<button id="add" type="button" class="btn btn-primary">Add</button>

var counter = 1;
$('#add').click(function () {

    $('<tr id="tablerow' + counter + '"><td>' +
   '<div class="row">' +
   <div class="form-group">' +
   '<div class="col-lg-12">' + '<input type="number" placeholder="0.00" class="form-control" asp-for="unitPrice" id="'+counter+'" onclick="(' + counter + ');" name="purchase[' + counter + '].unitPrice"   required="required" cols="20" rows="5" style="border-radius: 12px;"/>' +

Every time on button click it create new textbox.

I am trying to find value for the each textbox with javascript

function sum1(index) {
    if (counter > 1) {
        var val1 = document.getElementById(counter - 1).value;
      
             alert(val1);

This gives me the value of textbox, but problem is when I went back to previous textbox and try to the value or change the value javascript still show the value of last textbox.

For example textbox1 value is 1, javascript will shoow value 1

textbox 2 value 2 javascript will show value 2

textbox 3 value 3 javascript will show value 3

now if i will try to change any value in textbox1 or textbox2 javascript will still show value of textbox 3.

Please guide me if I have to use any other parameters, array or loop