title: Handlebars & Jquery: Dynamically generated ids
body: <p>I am generating a dynamic <code>form</code> and <code>button</code> on a <code>handlebars</code> page.</p>
  
  <p>The original <code>handlebars</code> code is this:</p>
  
  <pre><code>{{#each record}}
      &lt;input class="form-control" type="text" id="comment" value={{comment}}&gt; 
      &lt;button class="btn small btn-success" id="btn-savecomment"&gt;SAVE COMMENT&lt;/button&gt;
  {{/each}}
  </code></pre>
  
  <p>and I have a jquery script to save the contents of the form when each button is pressed: </p>
  
  <pre><code>$(document).ready (
      function() {
          $(document).on('click','#savecomment',function(event){
              // save id: comment to record
      );
  </code></pre>
  
  <p>The purpose is to allow the user to type in a comment and then save it to each record.</p>
  
  <p>However how can I ensure the button identifies the right input form when looking the comment? When I click on a particular button it only retrieves the comment from the first record because all of them have identical ids.</p>
  
  <p>Appreciate the help!</p>