jquery prop doesn't disabled after clicked button

Question

I have one question about jquery prop. I have created this DEMO from codepen.io

In this demo you can see there are two edit button with id. When i click the first edit button then it is working fine. but The edit button working also second click i want to disable current clicked button. What i am missing here anyone can help me in this regard ?

js

    $(document).ready(function() {
   $("body").on("click", ".editBtn", function() {
      var ID = $(this).attr("id");
      $('#ser' + ID).prop('disabled', 'true');
      var currentMessage = $("#messageB" + ID + " .postInfo").html();
      var editMarkUp = '<textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea><button name="ok">Save</button><button name="cancel">Cancel</button>';
      $("#messageB" + ID + " .postInfo").html(editMarkUp);
   });
});

html

<div class="container">
   <div class="postAr" id="messageB1">
      <div class="postInfo">
         fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsa
      </div>
      <button class="editBtn" name="edit" id="ser1">Edit</button>
   </div>
</div>
<div class="container">
   <div class="postAr" id="messageB2">
      <div class="postInfo">
         fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsass
      </div>
      <button class="editBtn" name="edit" id="ser2">Edit</button>
   </div>
</div>

Answer 1

You're not targeting the button. Use $(this).prop()

$(this).prop('disabled', 'true');

OR

A javascript way of doing what you want would be to expose the event object and set the disabled property of event.target:

$(document).ready(function() {
   $("body").on("click", ".editBtn", function(event) {
      event.target.disabled = true;

      ...
   });
});

Updated CodePen