JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css">
<div data-role="page" id="saved-credit-cards-page">  
<div data-role="content" id="CCSelectionForm">	
    
    <fieldset id="CCSelection" data-role="controlgroup" class="ui-shadow">
        <input name="card1" value="ground" type="radio" class="creditCardChoice" id="card1" checked="checked">
        <label for="card1">Visa Ending in 5991</label>
        <input name="card1" value="ground" type="radio" class="creditCardChoice" id="card2">
        <label for="card2">Visa Ending in 3333</label>        
	</fieldset> 
            
    <div class="ui-block-b"><a href="#" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini ui-icon-plus ui-btn-icon-left" id="addCard">Add Card</a>
    </div>
  
</div>
</div>

JavaScript

$( "#addCard" ).click(function() {
		$('<input name="card1" value="ground" type="radio" class="creditCardChoice" id="card4"><label for="card3">Visa Ending in 3333</label>')
		.appendTo("#CCSelection");
		
		$("input[type='radio']").checkboxradio();
        $('input:radio').checkboxradio('refresh');
        $("[data-role=controlgroup]").enhanceWithin().controlgroup("refresh");
        $('#CCSelection').controlgroup('refresh', true);
        $("#CCSelectionForm").trigger('create');
        $("#saved-credit-cards-page").trigger('pagecreate'); 
	});