JSFiddle - React, Tailwind, and code Playground

by Ahmad Sharif

HTML

<tr>
   <td>Display Name </td>
   <td class="displayInfoTd"> 
      <span id="fname_span" > Ahmad </span>
   </td>
   <td class="editInfoTd">
      <input type="text" name="fname" id="fname" value="{{$user_info->first_name}}">
      <ul class="margin-top-10">
         <li><button type="button" id="fname_save" name="fname_save" class="skylarkSmallBtn saveTrigger"><i class="fa fa-check font-size-10"></i> Save</button></li>
         <li><button type="submit" class="skylarkSmallBtn white cancelTrigger"><i class="fa fa-close"></i> Cancel</button></li>
      </ul>
   </td>
   <td class="triggerTd">
      <a href="javascript:void(0)" class="editTrigger" data-toggle="tooltip" data-placement="top" title="Edit Display Name"> <i class="fa fa-pencil font-10 margin-left-10"></i> </a>
   </td>
</tr>

JavaScript

$(function() {
			$('.editInfoTd').hide();
			$('a.editTrigger').click(function(event) {
				$(this).parent('td.triggerTd').siblings('td.displayInfoTd').hide(10);
				$(this).parent('td.triggerTd').siblings('.editInfoTd').show(10);
			});

			$('.saveTrigger').click(function(event) {
				$(this).closest('td.editInfoTd').hide(10);
				$(this).closest('td.editInfoTd').siblings('td.displayInfoTd').show(10);
			});


			$('.cancelTrigger').click(function(event) {
				$(this).closest('td.editInfoTd').hide(10);
				$(this).closest('td.editInfoTd').siblings('td.displayInfoTd').show(10);
			});
		});