JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Counters-1</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
</head>
<body>
<form id="create-counter">
<button>+</button>
</form>
<div id="CounterContainer"></div>
<script id="counter-template" type="text/html">
<div class="counter">
<div class="valueCount">{{txt}}</div>
<button class="add">add</button>
<button class="removeCounter">x</button>
<input type="text" class="title" id="title" placeholder="[ enter title ]" autocomplete="off">
</div>
</script>
</body>
</html>
JavaScript
$(function() {
var doc = $(document),
CounterContainer = $("#CounterContainer"),
//Container for all Counters
container = $(".counter"),
//Individual Conter Counters
counter = $(".valueCount"),
addBtn = $(".add"),
valueCount = $(".valueCount").html(),
addCounter = $("#create-counter"),
counterTemplate = Mustache.compile($("#counter-template").html());
if (localStorage.counterSave) {
CounterContainer.html(localStorage.counterSave);
}
function save() {
localStorage.counterSave = CounterContainer.html();
}
addCounter.submit(function(e) {
// prevent page from refresing
e.preventDefault();
var value = 5;
makeCounter(value);
save();
});
function makeCounter(value) {
$(counterTemplate({
txt: value
})).appendTo(CounterContainer);
}
CounterContainer.on("click", addBtn, function(valueCount) {
var EachContainer = $("div.valueCount"),
EachContainerValue = $("div.valueCount").html();
EachContainer.html(++EachContainerValue);
console.log("test");
save();
});
doc.on("click", "button.removeCounter", function() {
$(this).parent().remove();
save();
});
});