JSFiddle - React, Tailwind, and code Playground

HTML

<div class="textboxes">
  <ul>
    <li><span></span><input type="text" /></li>
    <li><span></span><input type="text" /></li>
    <li><span></span><input type="text" /></li>
  </ul>
</div>

<input type="button" value="Edit" id="editBut" />

CSS

.textboxes input[type=text] {
  margin: 0;
  padding: 0;
  display: none;
}

.textboxes ul li {
  list-style-type: none;
  padding: 5px 0 0;
}

#editBut {
  margin: 5px 0 0;
}

JavaScript

$("#editBut").click(function() {
   if ($('.textboxes input[type=text]').is(':visible')) {
     $('.textboxes input[type=text]').hide();
     $('.textboxes ul li span').show();

     // do save info
     $('.textboxes input[type=text]').each(function() {
       $(this).prev().text($(this).val());
     });

     $(this).val('Edit');
   } else {
     $('.textboxes input[type=text]').show();
     $('.textboxes ul li span').hide();
     $(this).val('Save');
   }
   //$(this).hide().after('<span class="dfk">' + $(this).val() + '</span>');  
 });