When I click on reply button 1 and reply button 2 Alternatively, then the second time I click on reply button 2, the code fires multiple times. Kindly assist me to stop the code from firing multiple times. I have gone through similar questions on SO but I have not yet had a solution.

function post_reply(){
    
    $('#reply-btn-2').click(function(e){
        
        var text2 = 'Reply 2<br>';
        
        $.ajax({
            url: 'ajax.php',
            type: 'POST',
            data: {'submit':1, 'post':2}
            
        }).done(function(response){
            $('.place-replies-here').append(text2);
            
            
        });
    });
    
}
$('#reply-btn-1').click(function(e){
    
    var text1 = 'Reply 1<br>';
    
    $.ajax({
        url: 'ajax.php',
        type: 'POST',
        data: {'submit':1, 'post':2}
        
    }).done(function(response){
        $('.place-replies-here').append(text1);
        
        
        post_reply();
    
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class = "place-replies-here"></div>

<div id = "reply-btn-1" style = "height:40px; width:100px;background:green;color:#fff; padding:5px; margin:8px;" class = "reply-btn">
    Reply 1
</div> 

<div id = "reply-btn-2"  style = "height:40px; width:100px;background:green;color:#fff;padding:5px; margin:8px;" class = "btn btn-success reply-btn">
    Reply 2
</div> 

2

Your code had some logic flaws. You added a click event listener to the Reply1 button that when will be fired will add a click event listener to the Reply2. It didn’t make sense. Every single time you clicked the button Reply1 it was going to add an extra listener again to the same Reply2 button again and again. So that when the click event will fire for Reply2, it will run all the listeners added to the event.

In this demo I made sure you add the click event listener once only to both the button elements. Plus I used the Promise method always instead of done because otherwise the code wouldn’t run at all here.

$('#reply-btn-2').click(function(e){
  $.ajax({
      url: 'ajax.php',
      type: 'POST',
      data: {'submit':1, 'post':2}            
  }).always(function(response){
      const text2 = 'Reply 2<br>';        
      $('.place-replies-here').append(text2);                        
  });
});

$('#reply-btn-1').click(function(e){    
  $.ajax({
      url: 'ajax.php',
      type: 'POST',
      data: {'submit':1, 'post':2}        
  }).always(function(response){
      const text1 = 'Reply 1<br>';      
      $('.place-replies-here').append(text1);                      
  });
});
.place-replies-here{
  border: solid 3px gray;
  padding: 1rem;
}

#reply-btn-1{
  height:40px;
  width:100px;
  background:green;
  color:#fff;
  padding:5px;
  margin:8px;
  cursor: pointer;
}

#reply-btn-2{
  height:40px;
  width:100px;
  background:green;
  color:#fff;
  padding:5px;
  margin:8px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="place-replies-here"></div>

<button id="reply-btn-1" class="reply-btn">Reply 1</button> 
<button id="reply-btn-2" class="reply-btn btn btn-success">Reply 2</button> 

The issue is because your second button event handler is nested within the function called from the first button. Therefore every time you click button one, button 2 gets a duplicated event handler.

To fix this, and DRY the code up, put a common class on both buttons and use that to select them. From there you can use data attributes to store the custom metadata you use in the AJAX request.

Also note that you shouldn’t put inline CSS in your HTML. You an external stylesheet for that.

Here’s working example:

// problem due to the nested event handler in `post_reply()`
// DRY up the code
// use CSS

$('.reply-btn').on('click', e => {
  let $btn = $(e.target);
  let text = $btn.text()

  $.ajax({
    url: 'ajax.php',
    type: 'POST',
    data: {
      submit: $btn.data('submit'),
      post: $btn.data('post')
    }
  }).done(function(response) {
    $('.place-replies-here').append(text);
  });
});
.reply-btn {
  height: 40px;
  width: 100px;
  background: green;
  color: #fff;
  padding: 5px;
  margin: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="place-replies-here"></div>
<div class="reply-btn" data-submit="1" data-post="2">Reply 1</div>
<div class="btn btn-success reply-btn" data-submit="3" data-post="4">Reply 2</div>

Not the answer you’re looking for? Browse other questions tagged html jquery or ask your own question.