<div id="todoList-container">
     <h1>Todo</h1>
     <div class="todoList">
       <div data-id="1">
        <input style="display: none;" type="checkbox" class="todoItemCheckbox" name="todoItem0" />
        <a href="#" class="todoBox"></a>
        <span>test 1</span>
        <span style="margin-left: 20px;">Development</span>
        <div class="todoForm" style="display: none;">
          <form class="todoItemCompleteForm" data-id="1">
            <input class="todoItemCompleteHours" type="text" placeholder="Hours">
            <textarea class="todoItemCompleteDescription" placeholder="description of work"></textarea>
            <a href="javascript:;" class="todoItemCompleteConfirm">Complete</a><a href="javascript:;" class="todoItemCompleteCancel">Cancel</a>
          </form>
        </div>
      </div>
      <div data-id="2">
        <input style="display: none;" type="checkbox" class="todoItemCheckbox" name="todoItem1" />
        <a href="#" class="todoBox"></a>
        <span>test 2</span>
        <span style="margin-left: 20px;">Research</span>
        <div class="todoForm" style="display: none;">
          <form class="todoItemCompleteForm" data-id="2">
            <input class="todoItemCompleteHours" type="text" placeholder="Hours">
            <textarea class="todoItemCompleteDescription" placeholder="description of work"></textarea>
            <a href="javascript:;" class="todoItemCompleteConfirm">Complete</a><a href="javascript:;" class="todoItemCompleteCancel">Cancel</a>
          </form>
        </div>
      </div>
    </div>
   </div>

$.ajax({
            url: API_URL + "todos/user/",
            data: {
              token: LOGIN_TOKEN,
              sortCompleted: 1
              //TODO: Need to send out a sessionID with every admin-based thing. Need another table that contains an expirable token that is sent back as sessionID.
            },
            type: "GET",
            dataType: "json"
          })
          .done(function(json) {
            for(var k = 0; k < json.length; k++) {
                //Show todoList strikethrough or with hidden form.
                if(json[k].status == "1") {
                  $('.todoList').append('<div data-id="' + json[k].ID + '"><span><strike>' + json[k].name + '</strike></span><span style="margin-left: 20px;">' + groups[parseInt(json[k].groupID)] + '</span><span style="float:right; margin-right:10px;" class="date">' + json[k].completed + '</span></div>');
                }
                else {
                  $('.todoList').append('<div data-id="' + json[k].ID + '"><input style="display: none;" type="checkbox" class="todoItemCheckbox" name="todoItem' + k + '" /><a href="#" class="todoBox"></a><span>' + json[k].name + '</span><span style="margin-left: 20px;">' + groups[parseInt(json[k].groupID)] + '</span><div class="todoForm" style="display: none;"><form class="todoItemCompleteForm" data-id="'+json[k].ID+'"><input class="todoItemCompleteHours" type="text" placeholder="Hours" /><textarea class="todoItemCompleteDescription" placeholder="description of work"></textarea><a href="javascript:;" class="todoItemCompleteConfirm">Complete</a><a href="javascript:;" class="todoItemCompleteCancel">Cancel</a></form></div></div>');
                }

            }

            $('.todoList').append('<div><input id="todoAddItemInput" type="text" placeholder="Todo Name" /><select><option>Development</option></select><a href="#" class="todoAddItem"><i class="fa fa-plus"></i></a></div>');
          })

#todoList-container {
    width: 80%;
    border: 1px solid #CCC;
    margin: 20px auto;
    border-radius: 10px;
    padding: 0 20px 40px;
}

#todoList-container h1 {
    margin-top: 10px;
}

#todoList-container .todoList {
    list-style-type: none;
}

#todoList-container .todoList div {
    font-family: 'Lora', serif;
    font-size: 18px;
    padding: 2px 4px;
    margin: 8px 0;
    border-bottom: 1px  solid #CCC;
    height: 40px;
    /* line-height: 40px; */
}

#todoList-container span {
    vertical-align: -2px;
    margin-left: 52px;
    color: #333;
}

#todoList-container .todoBox+span {
    margin-left: 0px;
    color: #777;
}

#todoList-container .todoBox {
    display: inline-block;
    height: 30px;
    width: 30px;
    border: 1px solid #CCC;
    margin-right: 20px;
    border-radius: 4px;
    text-decoration: none;
    /* vertical-align: 3px; */
}

#todoList-container .todoBox::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "f00c";
    color: #CCC;
    z-index: 999;
    top: 4px;
    left: 5px;
    position: relative;
    font-size: 20px;
}

#todoList-container .todoBoxSelected::after {
    color: #6db235;
}

#todoList-container #todoAddItemInput {
    margin-left: 48px;
    font-family: 'Lora', serif;
    border:0;
    font-size: 18px;
    padding: 2px 4px;
    color: #777;
    border-right: 1px solid #CCC;
    margin-right: 20px;
    vertical-align: -4px;
}