Geting the position of an array element in node js express - node.js

Question

i have retrieved a list of abjects from firebase onto my ejs file: and i am retrieving them in this manner:
<form id="eventform" method="post" action="/dasha">
<%Object.keys(notes).forEach(function(key){%>
<tbody id="event" name="event">
<tr>
<td>1</td>
<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">
<td id="evname" name="evname"><%=notes[key].event %></td>
</form>
<td><%=notes[key].location %></td>
<td><%=notes[key].codes %></td>
<td><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
I am however trying to implement an Onclick for so that when an item is clicked on it carries its info to the next page: I have tried to store it in aninput field like:
**<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">**
But i just cant get the individual item it pulls the whole array when i check for the value.Any help
Here is the sample data
Then i use jquery to submit:
$(document).ready(function () {
$("#event").click(function(){
var en = $("#evname").val();
$("#categ").val(en);
$("#eventform").submit();
});
});
Here is the rendered htmlsource and images /:
<tbody id="eventName" class="eventName" style="cursor: crosshair;" name="eventName">
<%Object.keys(notes).forEach(function(key,idx){%>
<tr>
<td id="tid" name="tid" class="tid" ><%= idx %></td>
<form name="eventForm-<%= idx %>" class="eventForm" method="post" action="/dasha">
<input type="hidden" id="categ-<%= idx %>" name="categ" class="categ" value="<%=notes[key].event %>">
<input type="hidden" id="idd" name="idd" class="idd" value="<%= idx %>">
</form>
<td id="evname-<%= idx %>" name="evname-<%= idx %>"><%=notes[key].event %></td>
<td id="elocation" name="elocation"><%=notes[key].location %></td>
<td id="ecodes" name="ecodes"><%=notes[key].code %></td>
<td id="edate" name="edate"><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
Here is the rendered html from the browser:
<tbody id="eventName" class="eventName" style="cursor: crosshair;" name="eventName">
<tr>
<td id="tid" name="tid" class="tid">0</td>
<form name="eventForm-0" class="eventForm" method="post" action="/dasha"></form>
<input type="hidden" id="categ-0" name="categ" class="categ" value="zuri.png">
<input type="hidden" id="idd" name="idd" class="idd" value="0">
<td id="evname-0" name="evname-0">zuri.png</td>
<td id="elocation" name="elocation">zuri.png</td>
<td id="ecodes" name="ecodes"></td>
<td id="edate" name="edate">-LZfAvzWGudUK78TGtT_</td>
</tr>
<tr>
<td id="tid" name="tid" class="tid">1</td>
<form name="eventForm-1" class="eventForm" method="post" action="/dasha"></form>
<input type="hidden" id="categ-1" name="categ" class="categ" value="Africa Tourism Technology and Innovation Awards">
<input type="hidden" id="idd" name="idd" class="idd" value="1">
<td id="evname-1" name="evname-1">Africa Tourism Technology and Innovation Awards</td>
<td id="elocation" name="elocation">USIU – Africa</td>
<td id="ecodes" name="ecodes">AA24VI</td>
<td id="edate" name="edate">25th – 26th April, 2019</td>
</tr>
<tr>
<td id="tid" name="tid" class="tid">2</td>
<form name="eventForm-2" class="eventForm" method="post" action="/dasha"></form>
<input type="hidden" id="categ-2" name="categ" class="categ" value="2nd Annual Global M I C E Summit">
<input type="hidden" id="idd" name="idd" class="idd" value="2">
<td id="evname-2" name="evname-2">2nd Annual Global M I C E Summit</td>
<td id="elocation" name="elocation">Trademark Hotel</td>
<td id="ecodes" name="ecodes">RT79XV</td>
<td id="edate" name="edate">11th – 13th September, 2019</td>
</tr>
</tbody>

Answer 1

You have a number of issues with your code, and despite trying to highlight them in comments there isn't enough space, hence this 'incomplete' answer
For starters you are opening a form tag before your forEach loop. You then close it during the first loop. So on your subsequent iterations there isn't a form to find.
Secondly, you have reused the same ID during the loop, which you should not do as it will generate multiple items with the same ID if you have multiple Objects you're looping through. If you have 2 elements with an ID of 'foo', using multiple of the same ID will lead to unintended consequences , each ID should be unique.
Thirdly you don't have a <table> tag around your tbody, some browsers therefore strip the tbody so you're click event will never fire. Also your rows are within a <tr> element so you should attach your click handler to this.
<form id="eventform" method="post" action="/dasha">
<%Object.keys(notes).forEach(function(key){%>
<tbody id="event" name="event">
<tr>
<td>1</td>
<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">
<td id="evname" name="evname"><%=notes[key].event %></td>
</form> // YOU'RE CLOSING YOUR FORM HERE INSIDE THE LOOP ITERATION
<td><%=notes[key].location %></td>
<td><%=notes[key].codes %></td>
<td><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
Now this isn't tested, and as I don't know the complete layout of your page it's a bit of a stab in the dark, but you could try something like the following and see if you have any luck
<%Object.keys(notes).forEach(function(key,idx){%>
<table>
<tbody id="event-<%= idx =>" name="event" class="eventName">
<tr class="row">
<td>1</td>
<form name="eventForm-<%= idx %>" class="eventForm" method="post" action="/dasha">
<input type="hidden" id="categ-<%= idx %>" name="categ" class="categ" value="<%=notes[key].event %>">
</form>
<td id="evname-<%= idx %>" name="evname-<%= idx %>"><%=notes[key].event %></td>
<td><%=notes[key].location %></td>
<td><%=notes[key].codes %></td>
<td><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
</table>
And a click handler similar to
$(document).ready(function () {
$(".row").click(function(ev){
let form = ev.currentTarget.querySelector('form');
form.submit()
});
A simpler version using vanilla JS can be found here https://jsfiddle.net/xvag0mj2/