How to pass #foreach value into Bootstrap Modal? Laravel 7.3 - php

Question

I have a list of categories, from where I want to pass {{category.name}} to data into Bootstrap modal.
I want to achieve that when I click on the specific button, to show the name of the category in the modal as a message?
Categories
<div class="card mt-2">#foreach($categories as $category)
<ul class="list-group list-group-flush">
<li class="list-group-item">{{ $category->name}}
<a href="" class="btn btn-danger btn-sm ml-2 float-right"
onclick="handleDelete({{$category->id}})">Delete</a>
Edit
</li>
</ul>
#endforeach
</div>
From where I've tried to pass {{$category->name}} into div element, but It showing the last element from the loop.
Modal
<form action="" method="POST" id="deleteCategoryForm">
#csrf
#method('DELETE')
<div class="modal fade" id="deleteModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Delete category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete "{{$category->name}}" ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Go Back</button>
<button type="submit" class="btn btn-danger">Yes, Delete</button>
</div>
</div>
</div>
</div>
</form>
JS Script
<script>
function handleDelete(id){
event.preventDefault();
var form = document.getElementById('deleteCategoryForm');
console.log('Delete', form);
form.action = '/categories/' + id;
$('#deleteModalCenter').modal('show');
}
</script>
Thanks in advance