JSFiddle - React, Tailwind, and code Playground

by kritya

HTML

<script src="http://oscargodson.com/labs/jkey/jquery.jkey-1.2.js"></script>
<div id="hmm">
    <p>
        Once upon a time there was a man
        who lived in a pizza parlor. This
        man just loved pizza and ate it all 
        the time.  He went on to be the
        happiest man in the world.  The end.
    </p>
    <div id="edit"><div id="ed1" ed="0">Edit 1</div><div id="ed2">Edit 2</div></div>
</div>
<div id="get">mm</div>

CSS

#hmm{
    background:cyan;
}
#edit{
    position:absolute;
    top:0px;
    right:5px;
    background:black;
    color:white;
    z-index-1;
    display:inline-block;
}
#ed1,#ed2 {
    display:block;
}

JavaScript

var words = $("p:first").text().split(" ");
var text = words.join("</span> <span>");
$("p:first").html("<span>" + text + "</span>");

function word() {
    $(this).html('<input class="mm" value="' + $(this).text() + '"/>');
    $(this).unbind("click");
    $(".mm").focus();
}
$("span").unbind("click");
$("#hmm").delegate(".mm", "blur", function() {
    $(this).replaceWith("<span>" + $(this).val() + "</span >");
    $("span").bind("click", word);
});
$("#ed1").click(function() {
    if ($(this).attr('ed') == '0') {
        $("#get").html("Editing 1");
        $("span").bind("click", word);
        $(this).attr('ed', '1')
        $(this).html("Done ?")
    }
    else {
        $(this).html("Edit 1");
        $("span").unbind("click", word);
        $(this).attr('ed', '0')
    }
});
$("#ed2").click(function() {
    $("#get").html("Editing 2");
});