JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="wrapper">
  <button id="openPopup">openPOP</button>
    <div data-role="popup" data-dismissible='false' id="testCaseId" data-theme="b" data-overlay-theme="a"><a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right cross-border">Close</a>

        <div data-role="fieldcontain">
            <label for="testCaseIDValue">TestCase Name:</label>
            <input type="text" name="testCaseIDValue" id="testCaseIDValue" value="" class="inputTextTestCase" />
        </div>
        <a href="#" data-role="button" id="donePopUp" class="common-button">Done</a>
    </div>
</div>

JavaScript

$(function(){
  $('#openPopup').click(function(){




$( "#testCaseId" ).popup( "open" );
  })
})