Javascript 如何在正确的数组中添加元素

我不能在我按下“添加交易btn”按钮的“任务卡”中准确显示“交易卡”。它出现在存在的最后一张“任务卡”中。 我想我不能在数组中添加正确的元素，但我不知道如何解决这个问题。 我怎样才能修好它

HTML

JS

let addTitle=document.querySelector（'.add_utitle'）；
让addBtn=document.querySelector（'.add_ubtn'）；
让tasks=document.querySelector（'.tasks'）；
addBtn.onclick=函数（）{
让task=document.createElement（'div'）；
task.className='task_uuucard'；
让taskTitle=document.createElement（“h4”）；
taskTitle.innerHTML=addTitle.value
task.appendChild（taskTitle）
让addDealinput=document.createElement（“输入”）；
设br=document.createElement（“br”）；
addDealinput.className=“添加交易输入”；
让addDealBtn=document.createElement（“按钮”）；
addDealBtn.className=“添加交易”；
addDealBtn.innerHTML=“添加交易”；
task.appendChild（addDealinput）；
子任务（br）；
task.appendChild（addDealBtn）；
任务。追加（任务）；
让dealBtn=document.querySelectorAll（'.add__deal__btn'）；
让taskCard=document.querySelectorAll（'.task_uu_u-card'）；
让dealInput=document.querySelectorAll（'.add__deal__input'）；
对于（设l=0；l您应该在此处使用
this
。尝试以下方法：

dealBtn[i].onclick = function() {
  taskDeal = document.createElement('div');
  taskDeal.className = 'deal__card';

  let  p = document.createElement("p");
  p.innerHTML = this.parentElement.querySelector('.add__deal__input').value;
  taskDeal.appendChild(p);

  this.parentElement.append(taskDeal);
}

你能用一种更简洁的方式写你的问题吗？你的问题很难阅读，也不容易理解。语法和拼写错误没有帮助。请详细说明你的问题
.task__card{
    display: inline-block;
    margin-right: 10px;
    background: darksalmon;
}

.deal__card{
    background-color: #b4d8ff;
    margin: 8px;
}

let addTitle = document.querySelector('.add__title');
let addBtn = document.querySelector('.add__btn');
let tasks = document.querySelector('.tasks');

addBtn.onclick = function() {
  let task = document.createElement('div');
  task.className = 'task__card';
  let taskTitle = document.createElement("h4");
  taskTitle.innerHTML = addTitle.value
  task.appendChild(taskTitle)
  let addDealinput = document.createElement("input");
  let br = document.createElement("br");
  addDealinput.className = "add__deal__input";
  let addDealBtn = document.createElement("button");
  addDealBtn.className = "add__deal__btn";
  addDealBtn.innerHTML = "Add deal";
  task.appendChild(addDealinput);
  task.appendChild(br);
  task.appendChild(addDealBtn);
  tasks.append(task);

  let dealBtn = document.querySelectorAll('.add__deal__btn');
  let taskCard = document.querySelectorAll('.task__card');
  let dealInput = document.querySelectorAll('.add__deal__input');

    for(let l=0;l<taskCard.length;l++){
        for(let i = 0;i < dealBtn.length;i++){
            dealBtn[i].onclick = function(){
                for(let inp=0;inp<dealInput.length;inp++){
                    taskDeal = document.createElement('div');
                    taskDeal.className = 'deal__card';
                    let  p = document.createElement("p");
                    p.innerHTML = dealInput[inp].value;
                    taskDeal.appendChild(p);
                }
                taskCard[l].append(taskDeal);
            }
        }
    }
}

dealBtn[i].onclick = function() {
  taskDeal = document.createElement('div');
  taskDeal.className = 'deal__card';

  let  p = document.createElement("p");
  p.innerHTML = this.parentElement.querySelector('.add__deal__input').value;
  taskDeal.appendChild(p);

  this.parentElement.append(taskDeal);
}