Javascript addEventListener包含append时不工作？

该网站有一个名为（svgAdd）的按钮，每次我点击该按钮时，它都应该向listBody div添加一个点。但它不起作用。我尝试了很多方法，但都没有起作用，如果您考虑使用+=点，那么每次我向listBody添加点时，它都会删除textarea的值

let count = 0;
$(`#svgNew`).click(function() {
      
    let point = 
        `
        <div class="point d-flex justify-content-between align-items-center" id="point">
            <div class="pointTxt" id="pointTxt">
                <p class="list-font">Enter Your Text</p>
                <textarea id="txtA" cols="30" rows="10"></textarea>
            </div>
            <div class="pointIcon${count}" id="pointIcon">
            </div>
        </div>
        `;
    let list =
        `
        <div class="list col-lg-4" id="list${count}">
        <div class="listHead d-flex justify-content-between align-items-center">
        <div class="listHeadSet" id="listHeadSet${count}">
            <svg xmlns="http://www.w3.org/2000/svg" class="list-svg" id="svgAdd${count}" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            <svg xmlns="http://www.w3.org/2000/svg" class="list-svg" id="svgDelete${count}" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" class="list-svg" id="svgRemove${count}" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-minus"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
        </div>
        <div class="listHeadTitle" id="listHeadTitle${count}">
            <h1 class="titleH list-font" id="titleH${count}">Title</h1>
            <input type="text" class="list-font titleInp" id="titleInp${count}" aria-label="Default" autocomplete="off" placeholder="Enter Title">
        </div>
        <div class="listHeadIcons">
            <svg xmlns="http://www.w3.org/2000/svg" class="list-svg" id="svgEdit${count}" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" class="list-svg" id="svgSet${count}" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sliders"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
        </div>
        </div>
        <div class="listBody${count}" id="listBody${count}"></div>
        </div>
        `;

       $(`.lists`).append(list);

       const listx = document.querySelector(`#list${count}`);
       const svgAdd = document.querySelector(`#svgAdd${count}`);
       const svgDelete = document.querySelector(`#svgDelete${count}`);
       const svgRemove = document.querySelector(`#svgRemove${count}`);
       const listHeadTitle = document.querySelector(`#listHeadTitle${count}`);
       const titleH = document.querySelector(`#titleH${count}`);
       const titleInp = document.querySelector(`#titleInp${count}`);
       const svgEdit = document.querySelector(`#svgEdit${count}`);
       const svgSet = document.querySelector(`#svgSet${count}`);
       const listHeadSet = document.querySelector(`#listHeadSet${count}`);
       const listBody = document.querySelector(`#listBody${count}`);

       let titleArr = [];
       let text = "";
       svgEdit.addEventListener("click", ()=> {
          titleH.classList.toggle(`hidden`);
          titleInp.classList.toggle(`show`);
          let inpValue = titleInp.value;
          if (inpValue.length == 0) titleH.innerHTML = titleArr[titleArr.length];
          else if (inpValue.length <= 15) titleH.innerHTML = inpValue; titleArr.push(titleInp.value);
       });
       svgSet.addEventListener("click", ()=> {
           listHeadTitle.classList.toggle(`hidden`);
           svgEdit.classList.toggle(`hidden`);
           listHeadSet.classList.toggle(`show`);
       });
       svgRemove.addEventListener("click", ()=> {listx.remove()});
       svgAdd.addEventListener("click", ()=> {
            $(`#listBody${count}`).append(point);
       })
       count++;
});

let count=0；
$（`svgNew`）。单击（函数（）{
让点=
`
输入您的文本
`;
出租清单=
`
标题
`;
$（`.lists`）.追加（list）；
const listx=document.querySelector（`list${count}`）；
const svgAdd=document.querySelector（`svgAdd${count}`）；
const svgDelete=document.querySelector（`svgDelete${count}`）；
const svgRemove=document.querySelector（`svgRemove${count}`）；
const listHeadTitle=document.querySelector（`listHeadTitle${count}`）；
const titleH=document.querySelector（`titleH${count}`）；
const titleInp=document.querySelector（`titleInp${count}`）；
const svgEdit=document.querySelector（`svgEdit${count}`）；
const svgSet=document.querySelector（`svgSet${count}`）；
const listweadset=document.querySelector（`listweadset${count}`）；
const listBody=document.querySelector（`listBody${count}`）；
设titlear=[]；
让文本=”；
svgEdit.addEventListener（“单击”，（）=>{
titleH.classList.toggle（`hidden`）；
titleInp.classList.toggle（`show`）；
设inpValue=titleInp.value；
如果（inpValue.length==0）titleH.innerHTML=titleArr[titleArr.length]；
else if（inpValue.length{
listHeadTitle.classList.toggle（`hidden`）；
svgEdit.classList.toggle（`hidden`）；
listHeadSet.classList.toggle（`show`）；
});
svgRemove.addEventListener（“单击“，（）=>{listx.remove（）}”）；
svgAdd.addEventListener（“单击”，（）=>{
$（`listBody${count}`）。追加（点）；
})
计数++；
});

为什么不完全使用Jquery进行元素选择呢？这样就不需要使用“addEventListener”

constlistx=$（`list${count}`）；
常量svgAdd=$（`svgAdd${count}`）；
常量svgDelete=$（`svgDelete${count}`）；
const svgRemove=$（`svgRemove${count}`）；
常量listHeadTitle=$（`listHeadTitle${count}`）；
常量titleH=$（`titleH${count}`）；
常量titleInp=$（`titleInp${count}`）；
常量svgEdit=$（`svgEdit${count}`）；
常量svgSet=$（`svgSet${count}`）；
常量listHeadSet=$（`listHeadSet${count}`）；
常量listBody=$（`listBody${count}`）；
设titlear=[]；
让文本=”；
svgEdit.on（“单击”，（）=>{
titleH.toggleClass（`hidden`）；
titleInp.toggleClass（`show`）；
设inpValue=titleInp.value；
如果（inpValue.length==0）titleH.innerHTML=titleArr[titleArr.length]；
else if（inpValue.length{
toggleClass（`hidden`）；
toggleClass（`hidden`）；
toggleClass（`show`）；
});
svgRemove.on（“单击“，（）=>{listx.remove（）}”）；
svgAdd.on（“单击”，（）=>{
$（`listBody${count}`）。追加（点）；
})
计数++；

它不起作用，控制台说“无法读取未定义的属性切换”！！！使用“.toggleClass（

className

）”而不是“classList.toggle（）”，listBody的追加子项仍然不起作用

   const listx = $(`#list${count}`);
   const svgAdd = $(`#svgAdd${count}`);
   const svgDelete = $(`#svgDelete${count}`);
   const svgRemove = $(`#svgRemove${count}`);
   const listHeadTitle = $(`#listHeadTitle${count}`);
   const titleH = $(`#titleH${count}`);
   const titleInp = $(`#titleInp${count}`);
   const svgEdit = $(`#svgEdit${count}`);
   const svgSet = $(`#svgSet${count}`);
   const listHeadSet = $(`#listHeadSet${count}`);
   const listBody = $(`#listBody${count}`);
   
   let titleArr = [];
   let text = "";
   svgEdit.on("click", ()=> {
      titleH.toggleClass(`hidden`);
      titleInp.toggleClass(`show`);
      let inpValue = titleInp.value;
      if (inpValue.length == 0) titleH.innerHTML = titleArr[titleArr.length];
      else if (inpValue.length <= 15) titleH.innerHTML = inpValue; 
      titleArr.push(titleInp.value);
   });
   svgSet.on("click", ()=> {
       listHeadTitle.toggleClass(`hidden`);
       svgEdit.toggleClass(`hidden`);
       listHeadSet.toggleClass(`show`);
   });
   svgRemove.on("click", ()=> {listx.remove()});
   svgAdd.on("click", ()=> {
        $(`#listBody${count}`).append(point);
   })
   count++;