How to properly get loading text display based on the like button click via jQuery

This code display several records from database and its working fine.

Here is my issue: when I click Eg. on button 1 to send my like, the loading text

Please Wait, sending like…

is seen displayed all over the record instead of displaying just for the records that I clicked.

The same thing is applicable when like result is being retrieved. Here is the screenshot:

I think I need to add record id to loader and result_like.

Something like

'loader'+id
'result_like'+id

Here is the entire code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('.like_post').click(function () {
            var id = $(this).data('id');
            alert(id);

            $('.loader').fadeIn(400).html('<div style="background:green;color:white;padding:6px;">Please Wait, sending like...</div>');
            var rec = {id: id};
            $.ajax({
                type: 'POST',
                url: 'like_rec.php',
                data: rec,
                cache: false,
                success: function (msg) {

                    $('.loader').hide();
                    $('.result_like').html(msg);
                }
            });
        });
    });
</script>

<?php
echo "<center><h3>Like Records</h3></center>";

include('db.php');
$res = $db->prepare("SELECT * FROM records_data");
$res->execute(array());

while ($row = $res->fetch()) {
    $id = htmlentities(htmlentities($row['id'], ENT_QUOTES, "UTF-8"));
    $file_name = $row['myfile'];
    ?>
    <div style="color:white;background:blue;padding:10px;">
        <b> Id:</b> <?php echo $id; ?><br>
        <b> Files Name:</b> <?php echo $file_name; ?><br>
        <div class="loader"></div>
        <div class="result_like"></div>
        <button data-id="<?php echo $id; ?>" class="like_post">like Record(<?php echo $id; ?>)</button>
        <br>
    </div>
    <?php
}
?>

like_rec.php

<?php
    $id =$_POST['id'];
    echo "I liked File with ID: ($id)";
?>

$('.loader').hide();
$('.result_like').html(msg);

$(this).parent('div').find('.loader').hide();
$(this).parent('div').find('.result_like').html(msg);

var container = $(this).parent('div');

//...

container.find('.loader').hide();
container.find('.result_like').html(msg);

$(this).parent().find('.loader')

$('.like_post').click(function(e) {
  // as you are doing an ajax post here, I would disable the default action of the button:
  e.preventDefault();

  var $button = $(this);  // you use this multiple times so it is more efficient to put it in a var
  
  var id = $button.data('id');
  
  var $buttParent = $button.parent();
  var $loader = $buttonParent.find('.loader');

  $loader.html('<div style="background:green;color:white;padding:6px;">Please Wait, sending like...</div>').fadeIn(400);  // I would change the html before the fadeIn
  
  var rec = {
    id: id
  };

  $.ajax({
    type: 'POST',
    url: 'like_rec.php',
    data: rec,
    cache: false,
    success: function(msg) {
      $loader.hide();
      $buttonParent.find('.result_like').html(msg);
    }
  });
});