JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="viewInformation" data-theme="d" data-add-back-btn="true" data-back-btn-text = "back">
          <div data-role="header" id="headerid" class="ui-bar ui-bar-b">
               
           <h3></h3> 
          </div>

          <div data-role="content" id="contentid">
              <input name="text" value="Edit Me" />
           <a href="#" id="saveDBValue" data-role="button" data-mini="true" style="width:60px; height:40px; float:center;">SAVE</a>
           <a href="#" id="edit" data-role="button">EDIT</a>


          </div>
        </div>

JavaScript

$(document).ready(function()
{  $('#contentid :input').each(function()

    {$(this).attr("disabled",true);});


$('#edit').live('click',function()
     {$('#contentid :input').each(function()
      {
      $(this).attr('disabled',false);});
     });
 
 $('#saveDBValue').live('click',function()
     {$('#contentid :input').each(function()
      {
          $(this).attr('disabled',true);});
     });
});