JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='transform-to-input'>
  <div class='text'>two</div>
  <div class='input hidden'>
    <textarea class='input-area'></textarea>
    <button class='update-text-div-text'>
    ok
    </button>
  </div>
</div>

CSS

.transform-to-input {
  
}
.transform-to-input .text {
  letter-spacing: 0.5px;
  font-size: 18px;
  line-height: 25px;
  transition: color 0.2s linear;
}
.transform-to-input .text:hover {
  cursor: pointer;
  color: teal;
  transition: color 0.2s linear;
}
.transform-to-input .input .input-area {
  width: 150px;
  height: 50px;
  outline: none;
  resize: none;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 8px;
}

.hidden {
  display: none;
}

JavaScript

$(function() {
	


	$('.transform-to-input .text').on('click', function() {
    var inputDiv = $(this).parent().children('.input');
    $(inputDiv).children('.input-area').val($(this).text());
    hideElement(this);
    showElement(inputDiv);
  });
  $('.update-text-div-text').on('click', function() {
  	var parent = $(this).parent();
  	var superParent = $(parent).parent();
    var newVal = $(parent).children('.input-area').val();
    $(superParent).children('.text').text(newVal);
    hideElement(parent);
    showElement($(superParent).children('.text'));
  });
});

function hideElement(inputParent) {
	$(inputParent).addClass('hidden');
}
function showElement(inputParent) {
	$(inputParent).removeClass('hidden');
}