How to select specific button from multi buttons inside each helper in Handlebars?

Question

{{#each posts}}    
   <input type="hidden" value="{{this.id}}" name="storeInput">
   <input type="button" value="Save" name="store">
{{/each}}

how to select specific button with jQyery?

Answer 1

If you have a reference to the post id on the client, you can generate an id or class based on this.id

<input type="hidden" id="post-{{this.id}}" value="{{this.id}}" name="storeInput">

then in js

const buttonEl = $('#post-' + post.id);

You don't need 'post-' but it's nice to namespace things.

I'm positive there's a better way to do this btw

Answer 2

Here, this event listener will filter on the buttons and the look at the previous sibling.

 document.addEventListener('click', (e) => { if(e.target.matches('[type="button"]')) { console.log(e.target.previousElementSibling.value); } }); 

 <input type="hidden" value="1" name="storeInput"> <input type="button" value="Save" name="store"> <input type="hidden" value="2" name="storeInput"> <input type="button" value="Save" name="store"> <input type="hidden" value="3" name="storeInput"> <input type="button" value="Save" name="store"> <input type="hidden" value="4" name="storeInput"> <input type="button" value="Save" name="store">