JSFiddle - React, Tailwind, and code Playground

by Vipin Patil

HTML

<div class="control-group">
    <label for="name" class="control-label">
        <p class="text-info">Vipin</p>
    </label>
    <input type="text" class="input-medium" style="display:none;" placeholder="Vipin">
    <div class="controls-edit"> <a href="#" onclick="edit(this);">Edit</a>

    </div>
    <div class="controls-update" style="display:none;"> <a href="#" onclick="update(this);">update</a>

    </div>
</div>
<div class="control-group1">
    <label for="name" class="control-label">
        <p class="text-info">Patil</p>
    </label>
    <input type="text" class="input-medium" style="display:none;" placeholder="Patil">
    <div class="controls-edit"> <a href="#" onclick="edit(this);">Edit</a>

    </div>
    <div class="controls-update" style="display:none;"> <a href="#" onclick="update(this);">Update </a>

    </div>
</div>

JavaScript

function edit(element) {
    var parent = $(element).parent().parent();
    var placeholder = $(parent).find('.text-info').text();
    //hide label
    $(parent).find('label').hide();
    //show input, set placeholder
    var input = $(parent).find('input[type="text"]');
    var edit = $(parent).find('.controls-edit');
    var update = $(parent).find('.controls-update');
    $(input).show();
    $(edit).hide();
    $(update).show();
    //$(input).attr('placeholder', placeholder);
}

function update(element) {
    var parent = $(element).parent().parent();
    var placeholder = $(parent).find('.text-info').text();
    //hide label
    $(parent).find('label').show();
    //show input, set placeholder
    var input = $(parent).find('input[type="text"]');
    var edit = $(parent).find('.controls-edit');
    var update = $(parent).find('.controls-update');
    $(input).hide();
    $(edit).show();
    $(update).hide();
    //$(input).attr('placeholder', placeholder);
    $(parent).find('label').text($(input).val());
}