Modals always opening the same div

Question

Hello,

I am doing a work in which there is a table with a button in each Row, and in each button, when clicked, a modal appears. This modal contains a slider input and a div where the text written in input.

The problem is, all modals appear with the same text, if you write 'qwerty' for example in the first, in the others also appears 'qwerty'.

How can I avoid this repetition in all modals?

$(document).ready(function () {

// send message to modal if message is empty do not send anything or if it is only spaces
$('#sendMessage').click(function () {
    if($.trim($('#inputToSend').val()) == ''){
        //do not send anything
    } else {
        $('.textModal').append('<p class="msg">' + $('#inputToSend').val() + '</p>');
        $('#inputToSend').val('').focus();
    }
});


// when modal button is closed text is erased
$(".modal").on("hidden.bs.modal", function() {
    $(".modal-body").html("");
    $(".modal-title").html("");
});
});

.textModal {
   margin: 0px 15px;
   font-size: 16px;
   padding: 10px;
   border: inset;
   height: 80px;
   overflow: auto;
   text-align:justify; 
}

.msg {
   margin: 0 0 10px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" id="btn-id" class="btn btn-sm btn-focus" style="padding: 8px;" data-backdrop="false" data-toggle="modal" data-target="#basicModal"><i class="fa fa-envelope-o"></i></a>
                    
                
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
     <div class="modal-content">
        <div class="modal-header">
           <h6 class="modal-title" id="title"></h6>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
               </button>
         </div>
         <div class="modal-body"></div>
         <div id="messageInput">
             <div class="textModal"></div>
             <input id="inputToSend" type="text" class="text form-control" placeholder="Insert Message...">
             <button id="sendMessage" class="btn btn-primary">Enviar</button>
         </div>
       </div>
     </div>
 </div>