Bootstrap Modal does not work display

@Tray2 Yes, There is no error at all which make it strange for me and I con not understand what happened at all...?!

@Q8Xbox You know that in the codeshare you only have a function for showing the edit modal, right?

@Tray2 In codeshare I open add modal used data-bs-toggle="modal" data-bs-target="#addCategoryModal" in button element to open it while for edit modal I have use manual method using jquary through editCategory function.

@Q8Xbox I would use the KISS method and do something like this

html

<div id="modal1" class="is-hidden">1</div>
<div id="modal2" class="is-hidden">2</div>
<div id="modal3" class="is-hidden">3</div>


<button  onclick="showModal('modal1')"> open 1</button>
<button  onclick="showModal('modal2')"> open 2</button>
<button  onclick="showModal('modal3')"> open 3</button>

css

.is-hidden {
  display:none;
}

js

function showModal(e) {
 let el = document.querySelector('#' + e);
 el.classList.remove('is-hidden');
}

@Tray2 Well Your code help me to find the exact issue when console.log el element which make me find that I'm missing close div inside modal body for both add & edit modal. It is strange that small things may cause you a lot of pain so thanks a lot :)