I have a code that I wrote with jquery. Clicking on the li elements in the ul list creates 2 new divs. I do this with the .append() method. But I have a problem. No javascript (jquery) codes are working in the divs I created later with the append() method. First orginal element is working but the two elements I created later do not work
here is my append function:
$(".chat_wrap_dublicate").append(`
<div class="chat_box_wrap" id="duplicater${count}">
<div class="chat_box_header">
<div class="chat_box_header_left">
<svg
width="13"
height="13"
viewBox="0 0 13 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="6.5" cy="6.5" r="6.5" fill="#24904A" />
</svg>
<p>Write Us</p>
</div>
<div class="chat_box_header_right">
<ul class="chat_box_right_button_collapse${count}">
<li class="chat_box_right_button_collapse_li">
<p>Clear chat</p>
<svg
width="12"
height="15"
viewBox="0 0 12 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.68716 0.890782H7.25212V1.30577H8.17842V0.832687C8.17853 0.373561 7.79026 0 7.31301 0H4.62627C4.14901 0 3.76074 0.373561 3.76074 0.832687V1.30577H4.68716V0.890782Z"
fill="#929292"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.62163 4.83496H10.3176C10.5559 4.83496 10.7435 5.03041 10.7242 5.25885L9.99716 13.9026C9.95665 14.3853 9.53806 14.757 9.03516 14.757H2.90399C2.40109 14.757 1.9825 14.3853 1.94199 13.9028L1.21498 5.25885C1.19577 5.03041 1.38335 4.83496 1.62163 4.83496ZM3.69821 13.8359C3.70781 13.8359 3.71753 13.8355 3.72725 13.835C3.98251 13.8198 4.17676 13.6086 4.16095 13.363L3.70547 6.26683C3.68978 6.02117 3.46907 5.83484 3.21463 5.8497C2.95938 5.86479 2.76513 6.07611 2.78082 6.32166L3.23641 13.4179C3.25152 13.6541 3.45537 13.8359 3.69821 13.8359ZM6.43799 13.3905C6.43799 13.6364 6.23063 13.8358 5.97479 13.8358C5.71895 13.8358 5.51158 13.6364 5.51158 13.3905V6.29419C5.51158 6.04819 5.71895 5.8488 5.97479 5.8488C6.23051 5.8488 6.43799 6.04819 6.43799 6.29419V13.3905ZM8.72346 13.4166L9.15845 6.32042C9.17344 6.07487 8.9786 5.864 8.72323 5.84959C8.46715 5.83506 8.24867 6.02241 8.23368 6.26796L7.79881 13.3643C7.7837 13.6098 7.97854 13.8206 8.23391 13.8351C8.24316 13.8355 8.25241 13.8358 8.26155 13.8358C8.50486 13.8358 8.70906 13.6533 8.72346 13.4166Z"
fill="#929292"
/>
<path
d="M11.9195 3.46067L11.6153 2.58385C11.5351 2.35271 11.31 2.19678 11.0565 2.19678H0.882723C0.629341 2.19678 0.404178 2.35271 0.324088 2.58385L0.0198895 3.46067C-0.0387724 3.62977 0.03757 3.80226 0.180068 3.88827C0.238144 3.92329 0.306876 3.94434 0.382399 3.94434H11.557C11.6325 3.94434 11.7013 3.92329 11.7593 3.88816C11.9018 3.80214 11.9781 3.62966 11.9195 3.46067Z"
fill="#929292"
/>
</svg>
</li>
<li class="chat_box_right_button_collapse_li">
<p>Mute</p>
<svg
width="12"
height="17"
viewBox="0 0 17 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.46804 2.94238H1.15602C0.516302 2.94238 0 3.45171 0 4.08273V8.89177C0 9.52274 0.516302 10.0321 1.15602 10.0321H3.46804C3.68386 10.0321 3.85338 9.86484 3.85338 9.652V3.3225C3.85338 3.10961 3.68386 2.94238 3.46804 2.94238Z"
fill="#929292"
/>
<path
d="M9.16848 0.106773C8.75237 -0.083285 8.28991 -0.0148386 7.94313 0.27405L4.72168 2.91966V10.0474C4.72168 10.0474 4.72168 10.0474 4.72168 10.055L7.94316 12.7006C8.28221 12.9895 8.7524 13.0579 9.16851 12.8679C9.58462 12.6778 9.839 12.2749 9.839 11.8263V1.14834C9.83897 0.699781 9.5846 0.296832 9.16848 0.106773Z"
fill="#929292"
/>
<path
d="M9.83897 6.36377V11.8266C9.83897 12.2751 9.5846 12.678 9.16848 12.8681C8.75237 13.0582 8.28218 12.9898 7.94313 12.7009L4.72168 10.0552C4.72168 10.0476 4.72168 10.0476 4.72168 10.0476V6.36377H9.83897Z"
fill="#929292"
/>
<path
d="M15.1805 9.19052C15.4249 9.4574 15.831 9.4574 16.0754 9.19052C16.3082 8.9363 16.3082 8.53247 16.0754 8.27825L12.3395 4.1987C12.0951 3.93181 11.689 3.93181 11.4446 4.1987C11.2118 4.45292 11.2118 4.85674 11.4446 5.11096L15.1805 9.19052Z"
fill="#929292"
stroke="#929292"
stroke-width="0.5"
/>
<path
d="M11.4446 8.27825L11.6257 8.44409L11.4446 8.27825C11.2118 8.53247 11.2118 8.9363 11.4446 9.19052C11.689 9.4574 12.0951 9.4574 12.3395 9.19052L16.0754 5.11096C16.3082 4.85674 16.3082 4.45292 16.0754 4.1987C15.831 3.93181 15.4249 3.93181 15.1805 4.1987L11.4446 8.27825Z"
fill="#929292"
stroke="#929292"
stroke-width="0.5"
/>
</svg>
</li>
</ul>
<svg
id="chat_box_drop_btn${count}"
width="30"
height="21"
viewBox="0 0 30 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="30" height="21" rx="4" fill="#D1CECE" />
<circle cx="9" cy="11" r="2" fill="white" />
<circle cx="15.1538" cy="11" r="2" fill="white" />
<circle cx="21.3076" cy="11" r="2" fill="white" />
</svg>
<svg
id="chat_box_collapse_btn${count}"
width="21"
height="21"
viewBox="0 0 21 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.0625 21H3.9375C1.76271 21 0 19.2373 0 17.0625V3.9375C0 1.76271 1.76271 0 3.9375 0H17.0625C19.2373 0 21 1.76271 21 3.9375V17.0625C21 19.2373 19.2373 21 17.0625 21Z"
fill="#929292"
/>
<rect
x="16.0776"
y="9.9668"
width="1.30951"
height="10.9126"
rx="0.654755"
transform="rotate(90 16.0776 9.9668)"
fill="white"
/>
</svg>
<svg
id="chat_box_close_btn${count}"
width="21"
height="21"
viewBox="0 0 21 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.0625 21H3.9375C1.76271 21 0 19.2373 0 17.0625V3.9375C0 1.76271 1.76271 0 3.9375 0H17.0625C19.2373 0 21 1.76271 21 3.9375V17.0625C21 19.2373 19.2373 21 17.0625 21Z"
fill="#929292"
/>
<rect
x="14.0166"
y="6.2998"
width="1.30951"
height="10.9126"
rx="0.654755"
transform="rotate(45 14.0166 6.2998)"
fill="white"
/>
<rect
x="14.9424"
y="14.0166"
width="1.30951"
height="10.9126"
rx="0.654755"
transform="rotate(135 14.9424 14.0166)"
fill="white"
/>
</svg>
</div>
</div>
<div class="chat_box_body_wrap">
<div class="chat_box_sender_wrap">
<div class="chat_box_sender_about_wrap">
<a href="#" class="chat_box_sender_name">Wandy Buffet</a>
<p class="chat_box_sender_text">
Commodi modi cumque voluptatem asperiores magnam reprehenderit.
</p>
</div>
<div class="chat_box_sender_about">
<a href="#">
<img
class="chat_box_sender_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_sender_time">15:15</p>
</div>
</div>
<div class="chat_box_receiver_wrap">
<div class="chat_box_receiver_about">
<a href="#">
<img
class="chat_box_receiver_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_receiver_time">15:15</p>
</div>
<div class="chat_box_receiver_about_wrap">
<a href="#" class="chat_box_receiver_name">Wandy Buffet</a>
<p class="chat_box_receiver_text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam
quos nostrum exercitationem quas
</p>
</div>
</div>
<div class="chat_box_receiver_wrap">
<div class="chat_box_receiver_about">
<a href="#">
<img
class="chat_box_receiver_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_receiver_time">15:15</p>
</div>
<div class="chat_box_receiver_about_wrap">
<a href="#" class="chat_box_receiver_name">Wandy Buffet</a>
<p class="chat_box_receiver_text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam
quos nostrum exercitationem quas
</p>
</div>
</div>
<div class="chat_box_sender_wrap">
<div class="chat_box_sender_about_wrap">
<a href="#" class="chat_box_sender_name">Wandy Buffet</a>
<p class="chat_box_sender_text">
Commodi modi cumque voluptatem asperiores magnam reprehenderit.
</p>
</div>
<div class="chat_box_sender_about">
<a href="#">
<img
class="chat_box_sender_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_sender_time">15:15</p>
</div>
</div>
<div class="chat_box_receiver_wrap">
<div class="chat_box_receiver_about">
<a href="#">
<img
class="chat_box_receiver_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_receiver_time">15:15</p>
</div>
<div class="chat_box_receiver_about_wrap">
<a href="#" class="chat_box_receiver_name">Wandy Buffet</a>
<p class="chat_box_receiver_text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam
quos nostrum exercitationem quas
</p>
</div>
</div>
<div class="chat_box_sender_wrap">
<div class="chat_box_sender_about_wrap">
<a href="#" class="chat_box_sender_name">Wandy Buffet</a>
<p class="chat_box_sender_text">
Commodi modi cumque voluptatem asperiores magnam reprehenderit.
</p>
</div>
<div class="chat_box_sender_about">
<a href="#">
<img
class="chat_box_sender_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_sender_time">15:15</p>
</div>
</div>
<div class="chat_box_receiver_wrap">
<div class="chat_box_receiver_about">
<a href="#">
<img
class="chat_box_receiver_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_receiver_time">15:15</p>
</div>
<div class="chat_box_receiver_about_wrap">
<a href="#" class="chat_box_receiver_name">Wandy Buffet</a>
<p class="chat_box_receiver_text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam
quos nostrum exercitationem quas
</p>
</div>
</div>
<div class="chat_box_sender_wrap">
<div class="chat_box_sender_about_wrap">
<a href="#" class="chat_box_sender_name">Wandy Buffet</a>
<p class="chat_box_sender_text">
Commodi modi cumque voluptatem asperiores magnam reprehenderit.
</p>
</div>
<div class="chat_box_sender_about">
<a href="#">
<img
class="chat_box_sender_img"
src="/assets/img/dummy1.png"
alt=""
/>
</a>
<p class="chat_box_sender_time">15:15</p>
</div>
</div>
</div>
<div class="chat_box_footer">
<form action="">
<div class="upload upload">
<div class="upload__wrap">
<input
class="upload__input"
type="file"
name="upload[]"
multiple="multiple"
data-max-count="3"
=""
accept="image/*"
/>
<div class="upload__btn"></div>
</div>
<div class="upload__mess">
<p class="count_img hidden_ms">
max img limit 18<strong class="count_img_var">8</strong>
</p>
<p class="size_img hidden_ms">
max img size:<strong class="size_img_var">5 Mb</strong>
</p>
<p class="file_types hidden_ms">
Permitted file formats:<strong class="file_types_var"
>jpg, png</strong
>
</p>
</div>
</div>
<input
placeholder="Write something..."
type="text"
id="emojionearea${count}"
class="chat_box_footer_input"
/>
<button class="chat_box_send_button">
<svg
width="26"
height="26"
viewBox="0 0 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.480926 9.77471C0.199649 9.88719 0.0113021 10.1551 0.000485742 10.4578C-0.0102799 10.7606 0.158669 11.0411 0.431212 11.1733L9.39647 15.5213L24.9181 0L0.480926 9.77471Z"
fill="#24904A"
/>
<path
d="M10.479 16.6025L14.8271 25.5678C14.9553 25.8322 15.2231 25.999 15.5153 25.999C15.5244 25.999 15.5334 25.9989 15.5426 25.9985C15.8454 25.9877 16.1132 25.7994 16.2258 25.5181L26.0006 1.08105L10.479 16.6025Z"
fill="#24904A"
/>
</svg>
</button>
</form>
</div>
</div>
`);
and for example here is my javascript code:
$("#chat_box_close_btn").click(function () {
alert("deleted");
$("#duplicater").remove();
});
$("#chat_box_close_btn2").click(function () {
alert("deleted2");
$("#duplicater2").remove();
});
$("#chat_box_close_btn2").click(function () {
alert("deleted3");
$("#duplicater3").remove();
});
$("#duplicater").click(function () {
alert("TEST i am 1")
})
$("#duplicater2").click(function () {
alert("TEST i am 2")
})
$("#duplicater3").click(function () {
alert("TEST i am 3")
})
