JSFiddle - React, Tailwind, and code Playground

by Anton Dyshkant

HTML

<div id="snippet_1">
<p class="show red"></p><i><input type="text" value="your php variable"><button class="hide">OK</button></i>
</div>
<div id="snippet_2">
<p class="show green"></p><i><input type="text" value="your php variable"><button class="hide">OK</button></i>
</div>
<div id="snippet_3">
<p class="show blue"></p><i><input type="text" value="your php variable"><button class="hide">OK</button></i>
</div>

CSS

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

JavaScript

$(document).ready(function() {
    $("i").hide();
    $(".hide").click(function() {
        var snippet = $(this).parent().parent().attr('id');
        $("#"+snippet+" i").hide();
        $("#"+snippet+" p").show();
    });
    $(".show").click(function() {
        var snippet = $(this).parent().attr('id');
        $("#"+snippet+" i").show();
        $("#"+snippet+" p").hide();
    });
    $("input").keyup(function() {
        var snippet = $(this).parent().parent().attr('id');
        var value = $(this).val();
        $("#"+snippet+" p").text(value);
    })
    .keyup();
});