JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<div class="snippet">
    <p class="display red"></p>
    <input class="input" type="text" value="your php variable"/>
    <button class="input save">OK</button>
</div>
<div class="snippet">
    <p class="display green"></p>
    <input class="input" type="text" value="your php variable"/>
    <button class="input save">OK</button>
</div>
<div class="snippet">
    <p class="display blue"></p>
    <input class="input" type="text" value="your php variable"/>
    <button class="input save">OK</button>
</div>

CSS

.display {
    width: 400px;
    height: 22px;
    text-align: center;
    cursor: pointer;
}
.red   { background: #f00; }
.green { background: #0f0; }
.blue  { background: #00f; }

.snippet .input   { display: none;  }
.snippet .display { display: block; }
.snippet.editable .input   { display: inline-block; }
.snippet.editable .display { display: none;  }

JavaScript

var $snippet = $('.snippet');

$snippet.on('click', '.display', function(e){
    e.stopPropagation();
    var $curr = $(this).closest('.snippet');
    $snippet.not($curr).removeClass('editable');
    $curr.addClass('editable');
});

$snippet.on('click', '.save', function(){
    var $curr = $(this).closest('.snippet');
    $curr.find('.display').text(
        $curr.find('input').val()
    );
    $snippet.removeClass('editable');
});

$snippet.on('click', function(e) {
    e.stopPropagation();
});

$(document).on('click', function(){
    $snippet.removeClass('editable');
});

$snippet.each(function(){
    $(this).find('.display').text(
        $(this).find('input').val()
    );
});