javascript - in meteor how to stop functionalities to work at a time? -

in meteor, have created cards dynamically after submitting form. , dynamic card contains show , hide buttons. when click on show option button hidden part showing cards instead of particular card. problem card creating dynamically thought problem .. how make functionality work separately each card.

here attaching code:

<div id="newactioncard">     {{#each newaction}}                  <div class="workflowcard">                  <div class="module-card">                      <div class="res-border"></div>                     <div class="card-img"></div>                     <div class="res-content">                      <div class="  assigned-team">{{team}}</div>                     <div class=" newaction-name">{{action_title}}</div><hr>                     <div class="description">{{description}}</div>                     <div class=" due-on">due on:{{d_date}}</div><hr>                     <div class="subcontent">                         {{> actioncardsubcontent}}                       </div>                      <div class="reqext">                            {{> requestextensioncard}}                   </div>                      </div>                      <div class="due">                         due on:                         <div>                             <span class="day-stamp">thu</span><br>                         <div class="date-stamp">26</div>                         <div class="month-stamp">aug                         </div>                         </div>                     </div>                    </div>      <div class="btn-box newaction">       <button type="button" class="cancelsub" >new action</button>       <button type="submit" class="createbtnsub" >show options</button>     </div>      <div class="btn-box showoption">       <button type="button" class="hideoption"  style="display:none">hide options</button>       </div>                  {{/each}}                                                                                                                                                       </div> 

in js have written hide , show functionalities in events..now how stop functionality cards @ time.

here js:

template.workflow.events({     "click .createbtnsub" : function() {       $( ".subcontent" ).show();      $('.createbtnsub').hide();         $('.cancelsub').hide();       $('.hideoption').show();        $('.requestextension').show();     },    "click .hideoption": function(){        $('.subcontent').hide();     },           "click .hideoption": function(){          $(".subcontent").hide();          $('.cancelsub').show();          $('.createbtnsub').show();          $('.requestextension').hide();          $('.hideoption').hide();          $('.reqext').hide();      },          "click #createactionbtn": function(){           $('#createaction').hide();          $('.editw').show();          $('.hidew').show();      }, });  template.actioncardsubcontent.rendered = function(){     this.$(".subcontent").hide(); };  template.requestextensioncard.rendered = function(){     this.$(".reqext").hide();  };  template.workflow.helpers({     getworkflow: function(){         return workflow.find();     },     user: function(){  return  meteor.users.find({});  },  getnewaction: function(){         return newaction.find();     },  }); 

please see following , adjust selectors needed:

     "click .showoption": function(event){         $(event.currenttarget).next('button').show();      } 

this work selecting sibling elements, tip recommend rewriting template.helper returns cards data database more specific.

something dynamic classes based on index or id class/id names return follows .showoption-12kjddfse4 . can attribute of current target , apply js selector.

also kind of explination why buttons showing, using class selector, meant grabbing groups of elements/nodes. reason created more specific classnames/ids use case.

so in class name like

<button class="showoption" id="{{_id}}">button</button> <button id="hiddenoption-{{_id}}" class="hiddenoption">button</button> 

then selecting elements easier follows:

'click .showoption'(event) => {    let id = event.currenttarget.getattribute(id);    document.getelementbyid('hiddenoption-'+id).style.display = 'block'; }