insert data in database dynamically

Question

 $query = "select * from comments t1 inner join users t2 on t1.user_id = t2.UserId where usercomplain_id='$id'";
   $run =mysqli_query($mysqli,$query);
   while($row=mysqli_fetch_array($run))
   {
   $commentid = $row['comment_id'];
   $comment = $row['comment'];
   $username = $row['UserName'];
   $userid1 = $row['UserId'];
   $date = $row['CDate'];
   $ageDate = time_elapsed_string($date);

  ?>

  <div class="jumbotron" style="border:3px solid #2FAB9B; background-color:#68C8C6;">
  <div class="row">
  <div class="col-md-10">
   <?php echo $comment; ?>
   </div>
   <div class="col-md-2">
   <?php echo $ageDate; ?>
   </div>
   </div>
   <br>
    <label>Comment by &nbsp;<a href="profile.php?id=<?php echo $userid1; ?>"><?php echo $username; ?></a></span></label><br>
    <a class="reply" data-role="<?php echo $commentid; ?>">Reply</a>

    <br>
    <br>

    <div style="width:63%; display:none;" class="replyForm" data-role="<?php echo $commentid; ?>">  
    <form method="post">
    <textarea cols="100" rows="4"></textarea><br>
    <br>
    <input type="submit" name="reply" class="btn btn-primary" style="float:right" value="reply">
    </form>
    </div>
  </div>

  <script>


$(document).ready(function(){
    $(".reply").click(function(){ 
        var current = $(this).attr("data-role");

        $('.replyForm[data-role="'+$(this).attr("data-role")+'"]').fadeIn();
    });
});
</script>
   <?php
 if(isset($_POST['reply']))
 {

     echo "<script>alert('$commentid')</script>";
 }
 ?>
   <?php } ?>

it is a simple comment system with each comment there is a reply link on click on reply link a textbox is shown . I want to enter comment reply to database table therefore I want to get the record of the specific comment. How to do that with PHP.

Answer 1

this code should do what you want, completely dinamically

<div class="jumbotron comment-container" data-pk="<?php echo $commentid; ?>">
    <div class="row">
        <div class="col-md-10">
            <?php echo $comment; ?>
        </div>
        <div class="col-md-2">
            <em class="text-muted"><?php echo $ageDate; ?></em>
        </div>
        <div class="col-md-12">
          <label>Comment by &nbsp;<a href="profile.php?id=<?php echo $userid1; ?>"><?php echo $username; ?></a></label><br/>
          <button class="btn btn-primary reply">Reply</button>
        </div>
    </div>
</div>

And here is the JS part. In order to reduce the code printed in the while loop, the reply form is cloned each time and appended where needed.

var reply_form = $('<div class="row replyForm-container"><div class="col-md-12">'+
    '<form method="post" class="reply-form">'+
    '<textarea class="form-control" rows="4">Prefilled content</textarea><br>'+
    '<br>'+
    '<button type="submit" name="reply" class="btn btn-primary" style="float:right" >Reply</button>'+
    '</form>'+
    '</div></div>');

$(".reply").click(function(){
    $(this).hide();
    var $container = $(this).closest('.comment-container');
    var pk = $container.data('pk');
    var rf_clone = reply_form.clone();
    rf_clone.find('form').attr('data-pk', pk).data('pk', pk);
    $container.append( rf_clone.hide().fadeIn(1000) );
});

// working with dynamical elements, we need to use delegation here
$(document).on('submit', '.reply-form', function(e){
    e.preventDefault();
    var reply_container = $(this).closest('.replyForm-container');
    var pk = $(this).data('pk');
    var reply = $(this).find('textarea').val();

    console.log('Insert reply "'+reply+'" for comment ID: '+pk);

    $.ajax({
        type: "POST",
        url: 'my_php_handler.php',
        async: false,
        dataType: "json",
        data: {action: 'add-reply', commend_id: pk, reply_text: reply},
        success: function (response) {
            if( response ) {
                reply_container.fadeOut('slow', function(){
                    var btn = reply_container.closest('.comment-container').find('button.reply');
                    $(this).remove(); //will remove the element after fadeOut completes
                    btn.show();
                })
              }
        }
    });
});

Check working Fiddle (ajax disabled)