title: Jquery assign different id to form based on button click dynamically
body: <p>I have a comment form with reply button down to each comments.</p>
  
  <p>reply form has initially <code>display:none</code> when the page is loaded, the reply button will trigger to brings up the form (reply_form) when it was clicked:</p>
  
  <p><strong>reply form:</strong></p>
  
  <pre><code>&lt;div class="reply_form" style="display:none;"&gt;
  
  &lt;form role="form" id="reply_form" style="margin-top:20px;"&gt;
  
      &lt;input type="hidden" name="email" value="&lt;?php echo $_SESSION['loggedIn'] ?&gt;"&gt;
      &lt;input type="hidden" name="list_id" value="&lt;?php echo $list-&gt;list_id ?&gt;"&gt;
      &lt;input type="hidden" name="parent_id" id="parent_id" value=""/&gt;
      &lt;input type="hidden" name="reply_to" id="reply_to" value=""/&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label class="sr-only" for="rname"&gt;Name&lt;/label&gt;
          &lt;input type="text" class="form-control input-sm" name="rname" value="&lt;?php echo $list-&gt;first_name.' '.$list-&gt;last_name ?&gt;" placeholder="Your name"&gt;&lt;span class="error" id="rname_error"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="sr-only" for="rcomment"&gt;Comment&lt;/label&gt;
          &lt;textarea rows="3" class="form-control input-sm" name="rcomment" placeholder="Your comment"&gt;&lt;/textarea&gt;&lt;span class="error" id="rcomment_error"&gt;&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;button type="button" class="btn btn-success" id="btn_reply_comment" data-id=&gt;Reply Comment&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jquery to show the form while reply button click:</strong></p>
  
  <pre><code>$('body').on('click','.btn_reply',function(){
  
      var id = $(this).data('id');
      var name = $(this).data('name');
  
      $("#parent_id").val(id);
      $("#reply_to").val(name);
      $("#reply_form").attr("id",$("#reply_form").attr("id") + id);
      $(".quickReplyForm").hide();
  
      $(this).after('&lt;div class="quickReplyForm"&gt;'+$(".reply_form").html()+'&lt;/div&gt;');
  
  });
  
  //reply comment
  $('body').on('click','#btn_reply_comment',function(){
      var parameters = $(this).closest('#reply_form').serialize();
      var btn = $(this);
      btn.button('loading')
      //alert(parameters);
  
      $.ajax({
          url: 'inc/callback/request_reply_comment.php',
          type: 'POST',
          data: parameters,
          dataType: 'json',
          success: function(response){
              if(response.success == 'success'){
                  $('#reply_form')[0].reset();
                  loadComments(list_id);
  
              }else{
                  $('[id$="_error"]').html('');
                  $.each(response.error, function(key, value){
                      if(value){
                          $('#' + key + '_error').html(value);
                      }
                  });
              }
          },
          error: function(){
              console.log(arguments);
          }
      }).always(function(){
          btn.button('reset')
      });
  
  });
  </code></pre>
  
  <p><strong><code>&lt;div class="quickReplyForm"&gt;</code> block to output reply form:</strong>, </p>
  
  <pre><code>while($row = $res-&gt;fetch_assoc()){
  
      $msg .= '
              &lt;div class="bs-callout bs-callout-info"&gt;
                  &lt;h5&gt;&lt;b&gt;'.$row['name'].'&lt;/b&gt; &lt;small&gt;'.date('M d, Y @ h:i A', strtotime($row['date'])).'&lt;/small&gt;&lt;/h5&gt;
                  &lt;p&gt;'.$row['comment'].'&lt;/p&gt;
                  &lt;p&gt;&lt;button type="button" class="btn btn-xs btn-success btn_reply" data-name="'.$row['name'].'" data-id="'.$row['id'].'"&gt;&lt;span class="glyphicon glyphicon-share-alt"&gt;&lt;/span&gt; Reply&lt;/button&gt;&lt;/p&gt;
                  &lt;div class="quickReplyForm"&gt;&lt;/div&gt;
              &lt;/div&gt;';
  }
  </code></pre>
  
  <p>my <strong>question</strong> is, how can I assign different id for each of the form by its reply button click dynamically? I can get the data attribute <code>var id = $(this).data('id');</code> and assigned into this line <code>$("#reply_form").attr("id",$("#reply_form").attr("id") + id);</code> once only.</p>
  
  <p>as shown on the screenshot, how can I give the id to each of the form with <code>id="reply_form2"</code> if comment 2 is click, and so on...?</p>
  
  <p><img src="https://i.stack.imgur.com/JFZ4u.jpg" alt="enter image description here"></p>