How can I display a row under another when a function is called?

I reproduced a code that I saw in a tutorial to do a crud with JavaScript and I’m trying to change some things. There’s a function to edit data that make an input field appear so that you can edit the data. I want this field to appear right below the data field and not at the end of the table which is how it is currently displayed. I would like it to appear under the die, pushing the others down.

var app = new function() {
  this.el = document.getElementById('tasks');
  this.tasks = [];

  this.FetchAll = function() {
    var data = '';
    if (this.tasks.length > 0) {
      for (var i = 0; i < this.tasks.length; i++) {
        data += '<tr class="row">';
        data += '<td>' + (i + 1) + '. ' + this.tasks[i] + '</td>';
        data += '<td><button onclick="app.Edit(' + i + ')" class="btn btn-warning">Edit</button></td>'
        data += '<td><button onclick="app.Delete(' + i + ')" class="btn btn-danger">Delete</button></td>'
        data += '</tr>'
      }
    }
    this.Count(this.tasks.length);
    return this.el.innerHTML = data
  };

  this.Add = function() {
    el = document.getElementById('add-todo');
    var task = el.value;
    if (task) {
      this.tasks.push(task.trim());
      el.value = '';
      this.FetchAll();
    }
  };

  this.Edit = function(item) {
    el = document.getElementById('edit-todo');
    el.value = this.tasks[item]
    document.getElementById('edit-box').style.display = 'block';
    self = this;
    document.getElementById('save-edit').onsubmit = function() {
      var task = el.value;
      if (task) {
        self.tasks.splice(item, 1, task.trim());
        self.FetchAll();
        CloseInput();
      }
    }
  };

  this.Delete = function(item) {
    this.tasks.splice(item, 1)
    this.FetchAll();
    CloseInput();
  };

  this.Count = function(data) {
    var el = document.getElementById('counter');
    var name = 'Tarefas';
    var trecho = document.getElementById('afazeres');
    if (data) {
      if (data == 1) {
        name = 'Tarefa';
      }
      trecho.innerHTML = name;
      el.innerHTML = data + ' ' + name;
    } else {
      el.innerHTML = 'Sem ' + name;
      trecho.innerHTML = '';
    }
  };

}

app.FetchAll();

function CloseInput() {
  document.getElementById('edit-box').style.display = 'none';
}
.title {
  text-align: center;
  margin-top: 25px;
}

.form {
  margin: auto;
  max-width: 80%;
  text-align: center;
}

table {
  table-layout: fixed;
  margin: 0 auto;
  width: 500px;
}

input[type='submit'],
button,
[aria-label] {
  cursor: pointer;
}

#edit-box {
  display: none;
  max-width: 80%;
  text-align: center;
}

td {
  background-color: aliceblue;
  padding-right: 10px;
}

.to-do {
  background: transparent !important;
  margin: 0 auto;
}

.row {
  margin-top: .5em;
}

@media screen and (max-width: 580px) {
  table {
    width: 300px;
  }
}

@media screen and (max-width: 380px) {
  .form {
    width: 80%;
  }
  table {
    width: 80%;
  }
}

@media screen and (max-width: 305px) {
  .btn-primary {
    margin-top: 1em;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
  <div class="title">
    <h1>Crud</h1>
    <p>Entre com os afazeres</p>
  </div>
  <div class="form">
    <form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
      <input type="text" id="add-todo" placeholder="Tarefas">
      <input type="submit" value="Add" class="btn btn-primary">
    </form>
    <p id="counter"></p>
    <table>
      <tr class="to-do">
        <th>
          <h3 id="afazeres"></h3>
        </th>
      </tr>
      <tbody id="tasks">
      </tbody>
    </table>
  </div>
  <div id="edit-box" role="aria-hidden">
    <form action="javascript:void(0);" method="POST" id="save-edit">
      <input type="text" id="edit-todo">
      <input type="submit" value="Save" class="btn btn-success">
      <a onclick="CloseInput()" aria-label="Close">&#10006;</a>
    </form>
  </div>
  <script src="script.js"></script>
</body>

</html>

Answer

You simply need to access the target location using rows and move the edit element to the row index using appendChild.

let targ = document.querySelector('#tasks');
targ.rows[item].appendChild(document.getElementById('edit-box'))

Additionally, I added a helper function to reset the edit-box. Whenever you add, finish editing or delete an item, this function runs to keep the edit-box safe from deletion or appearing where it shouldnt

this.ResetEdit = function() {
    document.querySelector('body').appendChild(document.getElementById('edit-box'))
    document.getElementById('edit-box').style.display = 'none';
  }

BTW: You pasted all your code in your question, but next time, go the extra step and make a runnable snippet with it, which is what I did here. It’s very easy and will likely attract more SO users to help

var app = new function() {
  this.el = document.getElementById('tasks');
  this.tasks = [];

  this.FetchAll = function() {
    var data = '';
    if (this.tasks.length > 0) {
      for (var i = 0; i < this.tasks.length; i++) {
        data += '<tr class="row">';
        data += '<td>' + (i + 1) + '. ' + this.tasks[i] + '</td>';
        data += '<td><button onclick="app.Edit(' + i + ')" class="btn btn-warning">Edit</button></td>'
        data += '<td><button onclick="app.Delete(' + i + ')" class="btn btn-danger">Delete</button></td>'
        data += '</tr>'
      }
    }
    this.Count(this.tasks.length);
    return this.el.innerHTML = data
  };

  this.Add = function() {
    el = document.getElementById('add-todo');
    var task = el.value;
    if (task) {
      this.tasks.push(task.trim());
      el.value = '';
      this.ResetEdit()
      this.FetchAll();
    }
  };

  this.Edit = function(item) {
    el = document.getElementById('edit-todo');
    el.value = this.tasks[item]
    let targ = document.querySelector('#tasks');
    targ.rows[item].appendChild(document.getElementById('edit-box'))
    document.getElementById('edit-box').style.display = 'block';
    self = this;
    document.getElementById('save-edit').onsubmit = function() {
      var task = el.value;
      self.ResetEdit()
      if (task) {
        self.tasks.splice(item, 1, task.trim());
        self.FetchAll();
        CloseInput();
      }
    }
  };

  this.Delete = function(item) {
    this.ResetEdit()
    this.tasks.splice(item, 1)
    this.FetchAll();
    CloseInput();
  };

  this.ResetEdit = function() {
    document.querySelector('body').appendChild(document.getElementById('edit-box'))
    document.getElementById('edit-box').style.display = 'none';
  }

  this.Count = function(data) {
    var el = document.getElementById('counter');
    var name = 'Tarefas';
    var trecho = document.getElementById('afazeres');
    if (data) {
      if (data == 1) {
        name = 'Tarefa';
      }
      trecho.innerHTML = name;
      el.innerHTML = data + ' ' + name;
    } else {
      el.innerHTML = 'Sem ' + name;
      trecho.innerHTML = '';
    }
  };

}

app.FetchAll();

function CloseInput() {
  document.getElementById('edit-box').style.display = 'none';
}
.title {
  text-align: center;
  margin-top: 25px;
}

.form {
  margin: auto;
  max-width: 80%;
  text-align: center;
}

table {
  table-layout: fixed;
  margin: 0 auto;
  width: 500px;
}

input[type='submit'],
button,
[aria-label] {
  cursor: pointer;
}

#edit-box {
  display: none;
  max-width: 80%;
  text-align: center;
}

td {
  background-color: aliceblue;
  padding-right: 10px;
}

.to-do {
  background: transparent !important;
  margin: 0 auto;
}

.row {
  margin-top: .5em;
}

@media screen and (max-width: 580px) {
  table {
    width: 300px;
  }
}

@media screen and (max-width: 380px) {
  .form {
    width: 80%;
  }
  table {
    width: 80%;
  }
}

@media screen and (max-width: 305px) {
  .btn-primary {
    margin-top: 1em;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="title">
  <h1>Crud</h1>
  <p>Entre com os afazeres</p>
</div>
<div class="form">
  <form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
    <input type="text" id="add-todo" placeholder="Tarefas">
    <input type="submit" value="Add" class="btn btn-primary">
  </form>
  <p id="counter"></p>
  <table>
    <tr class="to-do">
      <th>
        <h3 id="afazeres"></h3>
      </th>
    </tr>
    <tbody id="tasks">
    </tbody>
  </table>
</div>
<div id="edit-box" role="aria-hidden">
  <form action="javascript:void(0);" method="POST" id="save-edit">
    <input type="text" id="edit-todo">
    <input type="submit" value="Save" class="btn btn-success">
    <a onclick="CloseInput()" aria-label="Close">&#10006;</a>
  </form>
</div>