JSFiddle - React, Tailwind, and code Playground

by Bhavik Gandhi

HTML

<div id="common-popup" >

       <div id="data-popup" data-role="popup" data-theme="a">
           <p>Name: N/A</p> 
             <p>DOB: N/A </p>
       </div> <!--Popup div ends -->
    </div>

    <div data-role="page" id="page1">
        <input type='text' id='p1_name' value=''>Name: </input>
        <input type='text' id='p1_dob' value=''>DOB: </input>
        <button class="update-data" id="b1" >Update</button>
       <a href="#data-popup" data-rel="popup"> Watch Data </a>
    </div>

    <div data-role="page" id="page2">
        <input type='text' id='p2_name'>Name: </input>
        <input type='text' id='p2_dob'>DOB: </input>
        <button class="update-data" id="b2"/>
        <a href="#data-popup"> Watch Data </a>
    </div>

JavaScript

$(document).on("pagecreate", "#page1", function(){
    
   $('.update-data').on('vclick', function(){
      var id = $(this).prop("id");
          id = id.split('');
       
       var htm = '<div id="data-popup" data-role="popup">';
           htm += '<p>Name: ' + $('#p' + id[1] + '_name').val()  +'<p>';
           htm += '<p>Name: ' + $('#p' + id[1] + '_name').val()  +'<p>';

         $('#common-popup').html(htm);
         $( "#data-popup" ).enhanceWithin().popup();
     });    
    });

$(document).ready(function() {
    $( "#data-popup" ).enhanceWithin().popup();
});