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" /><br>
               <input name="text" value="Edit Me1" /><br>
              <input name="text" value="Edit Me2" /><br><br>
           <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>
        <br><br>
        <a href="#" id="add" data-role="button">ADD</a>
         <br><br>
          </div>
        </div>

JavaScript

var edit = false;

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

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

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

 $('#add').live('click',function(){
     if(edit)
     {
         $('#contentid').append('<input name="text" value="Added Me1"/><br>');
     }
     else{
         $('#contentid').append('<input name="text" value="Added Me1" disabled /><br>');
     }
});