how to continue array numbers in javascript whose data is displayed with a php loop [duplicate]

I have a phone number table in the database like this:

I show it with this php code:

<label for="inlineinput" class="col-md-3 col-form-label">No WA</label>
<?php
    $no=0;
    $cek=mysqli_query($koneksi,"select no_wa from wa_renev where id_proyek='112'");
    while($data = mysqli_fetch_array($cek)){
    $no++
?>
<div class='col-md-9 p-0'>
<input name='no_wa[<?php echo"$no";?>]' value='' type='text' class='form-control input-full' id='inlineinput' placeholder='Masukkan No WA (ex:087712333488)'/>
</div>
<?php
}
?>

And I use this JavaScript code to add another cellphone number with dynamically:

<script language="JavaScript" type="text/JavaScript">
counter = 0; //I've replaced it with the number 1 or 2 or 3 for this counter but why does the script error?
function action()
{
counterNext = counter + 1;
document.getElementById("input"+counter).innerHTML = "<div class='col-md-9 p-0'><input name='no_wa["+counterNext+"]' value='' type='text' class='form-control input-full' id='inlineinput' placeholder='Masukkan No WA (ex:087712333488)'/></div><div id="input"+counterNext+""></div>";
counter++;
}
</script>

<div id="input0">
</div>
<a href="javascript:action();"><span class="badge badge-primary">Tambah WA</span></a><br/>

How can I continue the array from my first code when the cellphone number is added again ?