$(document).ready(function () {
$("#button").click(function () {
var toAdd = $("input[name=checkListItem]").val();
var toAddNum = $("input[name=quantity]").val();
$(".list").append("<li class='item'>" + toAddNum + " " + toAdd + "</li>");
});
$(document).on("click", ".item", function () {
$(this).remove();
});
});
<body>
<h2>Grocery List</h2>
<form name="checkListForm">
<div class="quantity">Quantity</div>
<input type="text" name="quantity" maxlength="8" size="8" />
<div class="quantity">Product</div>
<input type="text" name="checkListItem" />
</form>
<div id="button">Add!</div>
<br/>
<ul class="list"></ul>
</body>
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#button {
display: inline-block;
height:20px;
width:70px;
background-color:#cc0000;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
.quantity {
display: inline-block;
height:20px;
width:70px;
font-family:arial;
font-weight:bold;
color:#000000;
text-align:center;
margin-top:2px;
}
.list {
font-family:garamond;
color:#000000;
}