title: How to use jQuery to get Input Field Value of dynamic table
body: <p>I'm currently using <strong>Meteor/Blaze framework</strong> to build a table. The row in the table will change according to the selected supplier. I have added <code>class={{_id}}</code> to the field and <code>q.{{_id}}</code> , <code>lot.{{_id}}</code> , and <code>exp.{{_id}}</code> to the quantity, lot , and expire date <strong>INPUT</strong>. </p>
  
  <p>I'm trying to write a Submit Events to get these value and pass it to the <strong>Mongo</strong> Database. Please suggest a good way to loop through these rows to get the value.</p>
  
  <p><strong>Website Image</strong></p>
  
  <p><a href="https://i.stack.imgur.com/FST7r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FST7r.png" alt="enter image description here"></a></p>
  
  <p><strong>Part of the code</strong></p>
  
  <p>receiveForm template</p>
  
  <pre><code>&lt;template name="receiveForm"&gt;
  ...
  &lt;select data-placeholder="Select an option" class="sel2js form-control select select-primary" id="supplier_sel" name="supplier"&gt;
        {{#each suppliers}}
          {{&gt; sel_supplier}}
        {{/each}}
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;!-- Receive Lot Table --&gt;
    &lt;table class="table table-bordered table-hover"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Product Name&lt;/th&gt;
          &lt;th&gt;Current Quantity&lt;/th&gt;
          &lt;th&gt;Unit of Measurement&lt;/th&gt;
          &lt;th&gt;Receive Quantity&lt;/th&gt;
          &lt;th&gt;Lot No&lt;/th&gt;
          &lt;th&gt;Exp Date (DD/MM/YYYY)&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        {{#each items}}
          {{&gt; receiveRow2}}
        {{/each}}
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;div class="text-center"&gt;
    &lt;button type="submit" class="btn btn-embossed btn-primary btn-wide" id="submitNewReceive" value="Submit"&gt;Submit&lt;/button&gt;
    &lt;button type="reset" class="btn btn-embossed btn-warning btn-wide" value="Reset"&gt;Reset&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>receiveRow2 template</p>
  
  <pre><code>&lt;template name="receiveRow2"&gt;
    &lt;tr id="{{_id}}"&gt;
      &lt;td class="pn"&gt;{{name}}&lt;/td&gt;
      &lt;td class="pq"&gt;{{totalQuantity}}&lt;/td&gt;
      &lt;td&gt;{{uomid.name}} ({{uomid.unit}} {{uomid.unitname}}/{{uomid.name}})&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" name="q.{{_id}}" placeholder="Quantity" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="form-control" name="lot.{{_id}}" placeholder="Lot No XX/YYYY" /&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;div class="input-group datetimepicker text-primary"&gt;
          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;input class="set-due-date form-control" name="exp.{{_id}}" type="text" placeholder="วัน/เดือน/ปี"/&gt;
          &lt;hr /&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>Template.receiveForm.events({
    'submit form': function(event, template){
      var supplierSelected = Template.instance().supplierSelected;
      items = Products.find({suppliers: supplierSelected.get()});
      event.preventDefault();
      docdate = event.target.docdate.value;
      supplier = event.target.supplier_sel.value;
      console.log("---event---");
      console.log(docdate)
      console.log(supplier)
      items.forEach(function(item){
        ????
      })
    }
  })
  </code></pre>