I have a javascript function to add a wishlist , and when im not adding on the wishlist is working fine but when i add a new wishlist and trying to add something to it its not working.
$('#new_wl').on("click", function() {
document.getElementById("newWishtList").style.display = "block";
});
$('#addNewWishList').on("click", function() {
let wishListValue = document.getElementById("new_wishlist__").value;
$.ajax({
url: "functions/addNewWishList.php",
method: "POST",
data: {
wishListValue: wishListValue
},
success: function(data) {
var innerhtml = document.getElementById('addToWishList').innerHTML;
document.getElementById('addToWishList').innerHTML = innerhtml + '<div class="row mb-3 wishlistclass"><div class="col-3 g-0 text-center d-flex justify-content-center ddd py-2"><i class="bi bi-heart bell-icon1 py-1 px-3"></i> </div><div class="col-8 my-auto"><h6 style="color:black" id="wishlistmm" class="ms-3">' + data + '</h6></div></div>'
document.getElementById('new_wishlist__').value = '';
}
})
document.getElementById("newWishtList").style.display = "none";
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>
<button type="button" class="btn" id="new_wl" style="color: #91dfa1;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#91dfa1" class="bi bi-plus-lg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z" stroke="#91dfa1" stroke-width="2" />
</svg> Neue Wunschliste
</button>
<button type="button" class="btn" data-bs-dismiss="modal" onclick="document.getElementById('newWishtList').style.display='none';" aria-label="Close">
<svg height="24" id="Layer_1" fill="#91dfa1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5 c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9 c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"></path>
</svg>
</button>
</div>
<div class="modal-body text-center" id="newWishtList" style="display: none;">
<div class="input-group mb-3">
<input type="text " class="form-control" name="" id="new_wishlist__" style="display:block; margin-left: -1px; border: none;border-radius: 0; outline: 0; border-bottom: solid 1px #91dfa1;opacity: 0.8;" />
<div class="input-group-append">
<span>
<button class="btn mt-2" id="addNewWishList" style="font-size:20px;color:#91dfa1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#91dfa1" class="bi bi-plus-lg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z" stroke="#91dfa1" stroke-width="2" />
</svg>
</button>
</span>
</div>
</div>
</div>