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

Question

I can't do that "deal__card" apper exactly in that "task__card" in which i press button "add__deal__btn".It appear in the last "task__card" which exist. The problam that I can't add in right element in array i suppose but I dont know how can I solve this problem. How can i fix it?

HTML

<div class="add">
   <input type="text" class="add__title">
   <br>
   <button class="add__btn">Add</button>
</div>
<div class="tasks"></div>

CSS

.task__card{
    display: inline-block;
    margin-right: 10px;
    background: darksalmon;
}

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

JS

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);
            }
        }
    }
}

Thank you a lot

Answer 1

You should use this here. Try 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);
}