JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <h1>Product List</h1>
        <input type="text" name="newProduct" id="newProduct" placeholder="Enter your product here"/>
        <ul id="productList"></ul>
        <input type="checkbox" id="selectAll"/><label for="Select all">Select all</label>
        <button id="deleteDoneProducts">Delete Selected</button>
    </div>

CSS

* {
	box-sizing:border-box;
}
body {
	font-family: Tahoma, sans-serif;
}
.container {
	margin:0 auto;
	width:600px;
}
h1, #newProduct {
	text-align: center;
	width:598px;
}
#newProduct {
	border:1px solid #999;
	padding: 20px;
	font-size: 28px;
	box-shadow: 0px 0px 3px #888;
}
#productList {
	list-style: none;
	padding-left:0;
	background-color: #F2F2F2;
}
.product {
	padding: 15px 0px 15px 40px;
	margin: 10px;
	position: relative;	
	font-size: 24px;
	box-shadow: 2px 2px 3px #848484;
	background-color: #fff;
	cursor: pointer;
}
.product:hover {
	background-color: #F2F2F2;
}
.doneProduct {
	margin-right: 40px;
}
.remove {
	background-image: url('http://www.imageup.ru/img200/2152803/delete_ico.png');
	background-position: 0 0;
	width:30px;
	height: 30px;
	position: absolute;
	right: 20px;
	top:13px;	
	display: none;
}
.remove:hover {
	background-position: -34px 0px;
}
.product:hover .remove {
	display: block;
}
.product:hover .remove {
	display: block;
}
#deleteDoneProducts {
	float: right;
	background-color: #a3d5df; 
	color: #fff;
	padding: 10px;
	border: none;
	text-transform: uppercase;
	font-weight: 900;
}
#deleteDoneProducts:hover {
	background-color: #5fb5c7;
	cursor: pointer;
}

JavaScript

function addNewProduct(e) {
    if(e.keyCode == 13) {
            var toAdd = $('input[name=newProduct]').val();
            $('#productList').append('<li class="product"> <input type="checkbox" class="doneProduct"/>'+toAdd+'<div class="remove"></div><li/>');
            $('#newProduct').val('');
            e.preventDefault();
        };
};

function deleteProduct() {
    $(this).parent().remove();
};
function productDone() {
    if (!$(this).is(":checked")){
        $(this).parent().css({'textDecoration': 'none', 'color': '#000'})
    } else  {
        $(this).parent().css({'textDecoration': 'line-through', 'color': '#999'});
    };
};

function deleteAllSelected() {
    $(".doneProduct:checked").parent().remove();
    $('input[type="checkbox"]').removeAttr("checked");
};

function selectAllProducts() {    
    if (!$(".doneProduct").is(":checked")) {
        $(".doneProduct").prop('checked', this.checked);
        $(".doneProduct").parent().css({'textDecoration': 'line-through', 'color': '#999'});

    } else {
        $(".doneProduct").parent().css({'textDecoration': 'none', 'color': '#000'});
        $(".doneProduct").prop('checked', this.checked);
    }    
};   
$(function() {
  $("#newProduct").on('keypress', addNewProduct);
    $(document).on('click', ".remove", deleteProduct);
    $(document).on('change', ".doneProduct", productDone);
    $("#deleteDoneProducts").on('click', deleteAllSelected);
    $("#selectAll").on('click', selectAllProducts);
    $(".product").on('dbclick', editProductName);
}) ;