How to create unique IDs when ranging over data in Golang and use in Javascript

I am getting data from the server and iterating over it to create a table and then I am using a form to store an id to local storage using javascript. Here is code snippet

<table>
	<tr><th>Product ID</th></tr>
	{{range .}}
	<td ><form onsubmit="save_data()" action="/" method="get"><button class="btn btn-info pid" id="pid" name="{{.puid}}" value="{{.puid}}">Update</button></form></td>
	{{end}}
<table>

<script>

function save_data() {
  var input = document.getElementByID("pid");
  localStorage.setItem("id", input.value); 

}	
			
</script>

However every time, no matter of which table row's "update" button I click, everytime only the ID of the first table row element is getting stored.
Is there a way I can generate unique IDs and reference it in Javascript when ranging over the data.
Thanks

In the loop You have

<button class="..." id="pid" name="{{.puid}}" value="{{.puid}}">Update</button>

which means that all buttons have id attribute whith the same value pid. This is an bug as id-s must be unique in the document. And when you call

document.getElementById("pid");

the first element matching the id="pid" is returned. That explains why "only the ID of the first table row element is getting stored".

To create unique id for each row you could use something like

{{range $index, $value := .}}
...<button class="..." id="pid{{$index}}" name="{{$value.puid}}" value="{{$value.puid}}">Update</button>...
{{end}}

but then you have a problem how to know which form was submitted when your save_data() event fires. To solve this you could send the current form or row id as a parameter, something like

{{range $index, $value := .}}
<td><form onsubmit="save_data(this, {{$index}})" action="/" method="get">...</form></td>
{{end}}

function save_data(form, rowno) {
  var input = document.getElementById("pid"+rowno);
  localStorage.setItem("id", input.value); 
}