JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page" data-theme="b" id="jqm-home"> 
    <div data-role="content">
        <div id="fnameDiv" data-role="fieldcontain">  
            <label for="name">Password:</label>  
            <input id="password" name="password" type="password" placeholder="Password"/>
        </div>
        <div id="fnameDivHidden" class="hidden_div" data-role="fieldcontain">  
            <label for="name">Password:</label>  
            <input id="password_hidden" name="password_hidden" type="text"/>
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-role="controlgroup" data-type="horizontal">
                <legend>Display Password:</legend>
                     <input type="radio" name="show_password" id="no" value="no" checked="checked" />
                     <label for="no">No</label>
        
                     <input type="radio" name="show_password" id="yes" value="yes" />
                     <label for="yes">Yes</label>
            </fieldset>
        </div>
    </div>
</div>

JavaScript

$('[name=show_password]').change(function() {
    var show = $('input[name=show_password]:checked').val() == 'yes';

    // toggle the password and the hidden text inputs
    $('#password_hidden').val($('#password').val());
    
    if(show) {
        $('#fnameDivHidden').show();
        $('#fnameDiv').hide();
    } else {
        $('#fnameDivHidden').hide();
        $('#fnameDiv').show();
    }
});

$('#fnameDivHidden').hide();