todolist-and-function-jquery.js

{
  "todoitem": [
    {
      "id": 1,
      "item": "first todo",
      "complete": true
    },
    {
      "id": 2,
      "item": "second todo",
      "complete": false
    },
    {
      "id": 3,
      "item": "third todo",
      "complete": false
    }
  ]
}

$(document).ready(function() {
    
    $.getJSON('http://localhost:3000/todoitem', updateFeedback);

    function updateFeedback(data) {
        let outPut = '';
        $.each( data, function( i, todo ) {            
            outPut += `
            <li id=${todo.id} class="list-group-item d-flex justify-content-between align-items-center ">
                ${todo.item}
                <div class="action-btn ml-auto d-flex align-items-center">
                    <i class="mx-2 fa fa-edit edit"></i>
                    <i class="mx-2 fa fa-trash-o delete"></i>
                    <input class="mx-2" type="checkbox">
                </div>
            </li>
            `;
            $('.list-group').html(outPut);
        });
    }

    $('#todo-form').submit(function (e) {
        e.preventDefault();
        $.post('http://localhost:3000/todoitem', {
            item: $('#item-input-value').val(),
            complete: false
        }, updateFeedback);
    });


});