JSFiddle - React, Tailwind, and code Playground

by marko

HTML

<p class="editable">Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma.</p>
<p class="editable">Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma.</p>
<p class="editable">Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma.</p>
<p class="editable">Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma.</p>
<p class="editable">Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma.</p>
<p class="editable">Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma.</p>

CSS

.editable {
    margin-top: 30px
}

JavaScript

$(".editable").each(function(i) {
    var $this = $(this);
    $this.attr("id", "orig-" + i);
    
    var $edit = $("<button />")
    .text("edit")
    .attr("id", "update-" + i)
    .click(function() {
        var $input = $('<input type="text" />')
            .attr("id", "edit" + i)
            .val($this.text());
        
        var $save = $('<button>Save</button>')
            .click(function() {
                var $new = $("<p />").text($input.val());
                $input.replaceWith($new);
                $(this).hide();
            });
        $(this).replaceWith($save);

        $this.replaceWith($input);
    });

   $(this).after($edit)
});