'Laravel Modal Edit

Good morning. A real beginner question here. I am creating a simple form. I want to open a edit model window. I suspect my script is wrong. The reason I suspect the script is if I remove the "modal-normal" from the script the modal window opens. I am getting not errors and nothing in console. I just need the edit button to be modal. I am using something else for add and delete. Thank you for any help you can provide in advance.

The Edit Button:

<a data_category_id= "{{ $category->id }}"
   data-category-name="{{ $category->name }}"
   data-category-type="{{ $category->type }}"
   data-category-color="{{ $category->color }}"
   type="button" class="btn btn-alt-primary" data-bs-toggle="modal"
   data-bs-target="#modal-normal">Edit</a>

The Modal Window:

<div class="modal" id="modal-normal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="block block-rounded shadow-none mb-0">
                <div class="modal-body">
                    <form action="..." method="POST">
                        <div class="block-content fs-sm">
                            @csrf
                            @method('PUT')
                            <input type="hidden" id="id" name="id">
                            <input type="text" class="form-control" id="edit_category_name" name="edit_category_name" placeholder="Category Name">
                            <select class="form-select" id="edit_category_type" name="edit_category_type">
                                <option selected="">Category Type</option>
                                <option value="Product">Product</option>
                            </select>
                            <input type="text" class="form-control input-lg" value="#902100" id="edit_category_color" name="category_color">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

My Script

$('#modal-normal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget)
    var edit_category_name = button.data('name')
    var edit_category_type = button.data('type')
    var edit_category_color = button.data('color')
    var id = button.data('id')
    var modal = $(this)
    modal.find('.modal-title').text('Edit Category ');
    modal.find('.modal-body #edit_category_name').val(name);
    modal.find('.modal-body #edit_category_type').val(type);
    modal.find('.modal-body #edit_category_color').val(color);
    modal.find('.modal-body #id').val(id);
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source