Laravel - how to make a dynamic id property in button to append element using javascript, id given by passing through modal

first, i made an edit-form using modal in laravel

I use 2 different files:

1. contains a button component to trigger edit-form

@include('employer.edit-form')
  <button data-modal-target="modal-edit-{{$task->id}}" data-modal-toggle="modal-edit-{{$task->id}}">
     <a  class="fa-solid fa-pen-to-square fa-lg"></a>
  </button>

2. a modal that shows edit-form when button clicked

<div id="modal-edit-{{$task->id}}" data-modal-backdrop="static" tabindex="-1" aria-hidden="true">
  <!-- Task Title -->
  <input type="text" id="task_name" name="task_name" value={{$task->task_name}} required />
  <!-- Button to append element -->
  <button id="{{$task->id}}" type="button"> + Add Here</button>
  <div id="example">appended text shows here</div>

I've already passed the data-id to show each object through data-modal-target and data-modal-toggle properties. It works fine, but the problem came when i tried to append element using javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
     $("#{{$task->id}}").click(function(){
              $("#example").append(
                `<p>successfully added</p>`
                );
            });
        });
</script>

Element can be appended only in the 1st object, when i tried to click "+ Add Here" button in different object (which is using the same modal) the appended element won't appear, it appears in the 1st object instead.

When I tried to change the button component into this

<button data-modal-target="modal-edit-{{$task->id===2}}" data-modal-toggle="modal-edit-{{$task->id===2}}">

and changed the modal into this

<div id="modal-edit-{{$task->id===2}}" data-modal-backdrop="static" tabindex="-1" aria-hidden="true">

and the only modal that can be appended element is the 2nd object, so i think the problem is the way i passed the id, because id property in the button make the id into string value. But im still confused and stressed

Could anyone help me please, thankyou in advance

After skipping this issue and getting back to solve it, I found out that the #example (ID of the div that you want to append the element to) should also have a unique ID.

So instead of

  $(document).ready(function(){
     $("#{{$task->id}}").click(function(){
              $("#example").append(
                `<p>successfully added</p>`
                );
            });
        });

Replace the #example to #example-{{$task->id}} like this:

  $(document).ready(function(){
     $("#{{$task->id}}").click(function(){
              $("#example-{{$task->id}}").append(
                `<p>successfully added</p>`
                );
            });
        });

and dont forget to change the id on the div itself

<div id="example-{{$task->id}}">appended text shows here</div>