JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">	<a class="navbar-brand" href="#">
					<img alt="Brand" src="http://people.mozilla.org/~faaborg/files/shiretoko/firefoxIcon/firefox-64-noshadow.png">
				</a>

            </div>
        </div>
    </nav>
    <main>
        <div class="page-header">
            	<h1>To do</h1>

        </div>
        <div class="input-group">
            <input type="text" class="form-control" id="inText" placeholder="Write chore here">	<span class="input-group-btn">
				<button class="btn btn-default" id="addText" type="button">Add</button>
			</span>

        </div>
        <ul class="list-group"></ul>
    </main>
</body>

</html>

CSS

.finished {
    text-decoration: line-through;
}
.page-header {
    text-align: center;
}
.glyphicon-ok {
    color: green;
}
.glyphicon-pencil {
    color: blue;
}
.glyphicon-remove {
    color: red;
}
.small {
    width: 80%;
    margin-left: auto;
}
span {
    padding-left: 10px;
}
li {
    font-size: 150%;
    word-wrap: break-word;
}
main {
    width: 90%;
    margin: auto;
}

JavaScript

$(document).ready(function () {

    $("#addText").on("click", function () {
        var inText = $("#inText").val();
        if (inText !== "") {
            $("#inText").val("");
            var theText = "<li class='list-group-item'>" + inText + "<span class='glyphicon glyphicon-remove pull-right' aria-hidden='true'></span><div class='glyphicon glyphicon-ok pull-right' id='1' aria-hidden='true'></div><span class='glyphicon glyphicon-pencil pull-right' aria-hidden='true'></span></li>";
            $(".list-group").append($(theText));
        }
    });

    $('#inText').keydown(function (e) {
        if (e.keyCode == 13) {
            var inText = $("#inText").val();
            if (inText !== "") {
                $("#inText").val("");
                var theText = "<li class='list-group-item'>" + inText + "<span class='glyphicon glyphicon-remove pull-right' aria-hidden='true'></span><span class='glyphicon glyphicon-ok pull-right' id='1' aria-hidden='true'></span><span class='glyphicon glyphicon-pencil pull-right' aria-hidden='true'></span></li>";
                $(".list-group").append($(theText));
            }
        }
    });

    $("ul").on("click", ".glyphicon-ok", function () {
        $(this).closest("li").toggleClass("finished");
        $(this).closest("li").toggleClass("list-group-item-success");
    });

    $("ul").on("click", ".glyphicon-remove", function () {
        $(this).closest("li").remove();
    });

    $("ul").on("click", ".glyphicon-pencil", function () {
        var old = $(this).closest("li").text();
        $(this).closest("li").html("<div class='input-group small'><input type='text' class='form-control' id='newText' placeholder=" + old + "><span class='input-group-btn'><button class='btn btn-default' id='updateText' type='button'>Uppdatera</button></span></div>");
    });

    $("ul").on("click", "#updateText", function () {
        var inText = $.trim($("#newText").val());
        console.log("hihi");
        if (inText !== "") {
...