JSFiddle - React, Tailwind, and code Playground
by mikeys4u
HTML
<div class='changeme' >1000</div>
CSS
#txtname {
color: red;
border: 2px solid blue;
width: 110px;
text-align: center;
}
div {
color: red;
border: 2px solid blue;
width: 110px;
margin: 3px;
text-align: center;
}
JavaScript
$(document).delegate('.done', 'click', function() {
$('#txtname').replaceWith(function() {
$(".done").hide();
// add to api to change budget
return '<div class="done">' + $(this).val() + ' - Saved...</div>';
});
});
$(".changeme").click(function() {
var thevalue = $( this ).text();
$(this).replaceWith($('<form action="replacewith.php" method="get"><input id="txtname" value=' + $(this).text() + '> <input class="done" type="button" value="Save Budget"></form>'));
});