Meteor: Multiple submit forms or any event that would let me extract data from my template?

Question

I'm making a little app in meteor to store car inspection registries, it uses an "autoform" form to insert the values that i need then i present those values somewhere else, one of my templates presents all items stored in the collection and i managed to make a "details" button that shows a modal that should have more details.

App screenshot

Modal Screenshot

Currently i have a hidden field with the id from the item in the collection, i send that id with a session and the template with the modal gets that session.

<form>
  <button type="submit" class="btn btn-md btn-warning" ><i class="fa fa-list"></i> Detalles</button> //submit button
  <input type="hidden" name="idp" value={{_id}} size="1"> //Hidden field with item id
</form>

It's working just fine, the problem is that i need the other buttons in the panel to act differently, yet all of them need the id from the item in the collection . The only way i know how to catch the contents from an element in a template is through event.target."elementName".value and this only works with the submit event i think, i tried document.getElementById with the click event but that only showed the first item in the collection, even if i clicked on the "details" button of another item.

The event code:

Template.Inspeccion.events({
  'submit form'(events){
      event.preventDefault();
      var id= event.target.idp.value;
      Session.set('id-carro', id);
      Modal.show('Detalles');
  },

The modal code:

Template.Detalles.helpers({
  carro: ()=> {
    var id= Session.get('id-carro');
      return Inspeccion.findOne({_id:id});
 },
});

Is there anyway to listen to different submit buttons or is there any other way to extract the contents from the template and use a different event that will work per button?

I'm pretty sure i'm missing something obvious but i can't find a solution online.

Thanks in advance and Happy Holidays.

Answer 1

You can define click events on buttons and refer to the current data context with this in your javascript. Ex:

html:

<button id="foo">click me</button>

js:

Template.Inspeccion.events({
  'click #foo'(){
    console.log(this._id); // "this" will be the data context that was clicked on
  }
});