How can I create a list where I can add and remove inputs via buttons?

Question

I've an idea. For this I need a list like this draw:

So the main idea is to have a plus and a minus button. When a users presses the plus button, another input get's added. When pressing the minus button beside each input, the related input should be removed.

So I've startet with this here but I'm not very with it and the functionality is not given yet. How can I deal with this a smart way? Is there a problem with the id's? I mean I could copy a row or insert it (with JS) but how can I get the values later of all inputs in one map (with JS) for example? A lot of questions..

.out-task {
  display: flex;
  margin-bottom: 8px;
}

.delete-task-button {
  margin-left: 6px;
  background: red;
}

.button {
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.add-task-button {
  background: green;
}

<div class="wrapper">
  <label>Tasks</label>
  <div id="tasks-wrapper">
      <div class="out-task">
          <input type="text" id="task" name="task" value="">
          <span class="delete-task-button button">-</span>
      </div>
</div>
<span class="add-task-button button">+</span>
</div>

Thanks for helping me out!!!

Answer 1

As I have criticized everyone, I let you do the same on my code:

const ListTasks     = document.querySelector('#wrapper > div')
  ,   PosInsertTask = document.querySelector('#wrapper > div > span.add-task-button')
  ,   taskWrapper   = document.querySelector('#template > div')
  ;
ListTasks.onclick=e=>
  {
  if (e.target.classList.contains('add-task-button'))
    {
    let newTask = taskWrapper.cloneNode(true)
    ListTasks.insertBefore(newTask, PosInsertTask)        
    }
  else if (e.target.classList.contains('delete-task-button'))
    {
    ListTasks.removeChild(e.target.closest('.out-task'))
    }
  }

.out-task {
  display      : flex;
  margin-bottom: 8px;
}
.delete-task-button {
  margin-left: 6px;
  background : red;
}
.button {
  width          : 30px;
  height         : 30px;
  display        : block;
  border-radius  : 50%;
  color          : white;
  display        : flex;
  justify-content: center;
  align-items    : center;
  cursor         : pointer;
  font-weight    : bold;
}
#wrapper { display: inline-block; border: 1px solid grey; padding:.8em;}
#wrapper h4 { text-align: center; }
.add-task-button {
  background: green;
  margin: auto;
}
#template { display: none;}

<div id="wrapper">
  <h4>Tasks</h4>
  <div>
    <div class="out-task">
      <input type="text" value="">
      <span class="delete-task-button button">-</span>
    </div>
    <span class="add-task-button button">+</span>
  </div>
</div>

<div id="template">
  <div class="out-task">
    <input type="text" value="">
    <span class="delete-task-button button">-</span>
  </div>
</div>