JSFiddle - React, Tailwind, and code Playground

by hollanditkzn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>
  <span class='glyphicon glyphicon-floppy-disk action'></span>
</div>
<input type="text" value='Замена'>

CSS

div{
  margin-left: 10px;
  margin-top: 10px;
  font-size: 16px;
}

JavaScript

$('body').on('click', '.action',function(){
	$( this ).removeClass( 'glyphicon-floppy-disk action' ).addClass( 'glyphicon-pencil edit' );
  var value = $('input[type=text]').val();
  $('input[type=text]').replaceWith('<div class="info-block" data-text='+value+'>'+value+'</div');
})
$('body').on('click', '.edit',function(){
	$( this ).removeClass( 'glyphicon-pencil edit' ).addClass( 'glyphicon-floppy-disk action' )
  let value = $('.info-block').data('text');
  $('.info-block').html('<input type="text" value='+value+'>')
})