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

[Rejoy]

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

[Konstantin Khomoutov]

On Mon, 6 Mar 2017 23:30:20 -0800 (PST)
Rejoy <rej...@gmail.com> wrote:

> 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>

This loop

> {{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}}

would create N table rows with N buttons all having the same "id"
attribute set to "pid", so this callback

[...]

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

[...]

will always find the topologically first element by that attribute.
Isn't that your exact problem then?

> 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

I'd say, in your loop, you should roll like this:

1) Increase some simple counter variable initially set to, say 0.

2) Use it to generate the values for the "id" attributes of your
buttons.

3) Set callback in a way to pass it the exact attribute value to search
for, like with

form onsubmit="save_data($pid)

4) In the callback, use the supplied value directly.

Or maybe just not reinvent the wheel and use some JS library which
would produce data bindings for you do you don't have to wire explicit
callbacks etc.

[Rejoy Nair]

Thanks a lot!. Your answers have been helpful. I was also provided with a very good solution from another forum that I 'll post that here for the benefit for anybody who 'd come across this post. Its on the lines of what you 'd suggested. Till  then I was actually beginning to think that this wasn't even really a Golang question.

for creating unique id for each row

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

sending the current form or row id as a parameter to know which form was submitted when the save_data() event fires. 

{{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); 
} 

[Konstantin Khomoutov]

On Tue, 7 Mar 2017 15:42:11 +0530
Rejoy Nair <rej...@gmail.com> wrote:

> Thanks a lot!. Your answers have been helpful. I was also provided
> with a very good solution from another forum that I 'll post that
> here for the benefit for anybody who 'd come across this post.

You mean <http://stackoverflow.com/a/42642988/720999>, don't you? ;-)

> Its on the lines of what you 'd suggested. Till then I was actually
> beginning to think that this wasn't even really a Golang question.

It can be deemed as being related to the stock Go templating, so that's
OK even though the essense of your problem wasn't Go-specific.

[...]

[Rejoy Nair]

Yes..thats the link.. :)  was a bit short on time.. so posted the question in multiple forums.. was struggling a bit manipulating html elements .. so was kind of overwhelmed by the answer provided...