Jquery assign different id to form based on button click dynamically

Question

I have a comment form with reply button down to each comments.

reply form has initially display:none when the page is loaded, the reply button will trigger to brings up the form (reply_form) when it was clicked:

reply form:

<div class="reply_form" style="display:none;">

<form role="form" id="reply_form" style="margin-top:20px;">

    <input type="hidden" name="email" value="<?php echo $_SESSION['loggedIn'] ?>">
    <input type="hidden" name="list_id" value="<?php echo $list->list_id ?>">
    <input type="hidden" name="parent_id" id="parent_id" value=""/>
    <input type="hidden" name="reply_to" id="reply_to" value=""/>

    <div class="form-group">
        <label class="sr-only" for="rname">Name</label>
        <input type="text" class="form-control input-sm" name="rname" value="<?php echo $list->first_name.' '.$list->last_name ?>" placeholder="Your name"><span class="error" id="rname_error"></span>
    </div>
    <div class="form-group">
        <label class="sr-only" for="rcomment">Comment</label>
        <textarea rows="3" class="form-control input-sm" name="rcomment" placeholder="Your comment"></textarea><span class="error" id="rcomment_error"></span>
    </div>

    <button type="button" class="btn btn-success" id="btn_reply_comment" data-id=>Reply Comment</button>
</form>

</div>

jquery to show the form while reply button click:

$('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('<div class="quickReplyForm">'+$(".reply_form").html()+'</div>');

});

//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')
    });

});

<div class="quickReplyForm"> block to output reply form:,

while($row = $res->fetch_assoc()){

    $msg .= '
            <div class="bs-callout bs-callout-info">
                <h5><b>'.$row['name'].'</b> <small>'.date('M d, Y @ h:i A', strtotime($row['date'])).'</small></h5>
                <p>'.$row['comment'].'</p>
                <p><button type="button" class="btn btn-xs btn-success btn_reply" data-name="'.$row['name'].'" data-id="'.$row['id'].'"><span class="glyphicon glyphicon-share-alt"></span> Reply</button></p>
                <div class="quickReplyForm"></div>
            </div>';
}

my question is, how can I assign different id for each of the form by its reply button click dynamically? I can get the data attribute var id = $(this).data('id'); and assigned into this line $("#reply_form").attr("id",$("#reply_form").attr("id") + id); once only.

as shown on the screenshot, how can I give the id to each of the form with id="reply_form2" if comment 2 is click, and so on...?

Answer 1

When you creating these button, just assign an ID to each button according to the comment ID [look at the ID inside button tag]:

while($row = $res->fetch_assoc()){
    $msg .= '<div class="bs-callout bs-callout-info">
             <h5><b>'.$row['name'].'</b> <small>'.date('M d, Y @ h:i A', strtotime($row['date'])).'</small></h5>
            <p>'.$row['comment'].'</p>

            <p><button id="comment-id" type="button" class="btn btn-xs btn-success btn_reply" data-name="'.$row['name'].'" data-id="'.$row['id'].'">

            <span class="glyphicon glyphicon-share-alt"></span> Reply</button></p>
            <div class="quickReplyForm"></div>
        </div>';
}

Now whenever the click event taking place, just pick the comment ID from the button like bellow:

$('body').on('click','#btn_reply_comment',function(){
    var comment_id = $(this).attr('id');
    // Do what ever you want to do with this ID
}

Answer 2

IDs must always be unique.

Use a custom data value or unique IDs like form_1 ... form_8. Then find your elements by using $('#form_'+yourid) or $('.form[data-id='+yourid']').