Javascript kodları çok karmaşık yazıyorum

<div class="container p-lg-block p-0">
    <div class="card">
        <div class="card-header py-4">
            <h2>To Do List</h2>
        </div>
        <div class="card-body">
            <form>
                <div class="input-group mb-3">
                    <input type="text" class="form-control border-radius" placeholder="Yeni Görev Ekle" id="task_input" autocomplete="off">
                    <div class="input-group-append">
                        <button class="btn btn-primary ms-1 px-3" type="submit" onclick="addBtn()" id="buttonAdd">Ekle</button>
                        <button class="btn btn-primary ms-1 px-3 " type="submit" id="editAdd">Edit</button>
                       
                    </div>
                </div>
            </form>
            <ul class="list-group list-group-flush" id="taskList">

             
                <!-- <li class="list-group-item">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="1">
                        <label class="form-check-label w-100 d-inline" for="1">Görev  1</label>
                        <button type="button" class="btn btn-danger float-end" id="removeTaskBtn">X</button>
                    </div>
                </li> -->

            </ul>
          </div>
        </div>
      </div>