JSFiddle - React, Tailwind, and code Playground

HTML

<form name="fromTest">
    
<div>
    Enter Name <input type="text" name="Test1" id="Test1" value="" /><button type ="button" name="addAgent" id="addAgent"> Add Agent</button>
    <div id="container"></div>
</div>
    <button name="tab1Submit" type="submit" class="btn btn-primary" >Submit</button>
</form>

JavaScript

$('[name=addAgent]').bind('click', function() {
    
        var agentName = $("#Test1").val(); 
        var testAgentIDVal = "A12345";
 	
    	
    			
    			if($('#container').find('[name=removeAgent]').length < 2) {
    			
	    			var len = $('#container').find('[name=removeAgent]').length;
	    			//alert(len);
	    			var index = len+1;
	    			
	        		$('#container').append('<label>'+agentName+'</label><input type="hidden" id ="AgentID'+ index +'" name ="AgentID'+ index +'"  type="text" value="'+testAgentIDVal+'" ><input type="radio" name="primaryAgent" id="primaryAgent" value="'+testAgentIDVal+'">Primary</label><p id="note"><button type ="button" name="removeAgent" id="removeAgent"  >Remove Agent</button>');
	                
                     
    			}
			})

$('[name=tab1Submit]').click(function(){
    
    alert($("#AgentID1").val() +", "+ $("#AgentID2").val());
    
})

$('input[name=primaryAgent]:radio').click(function(){
alert("test alert");
	$("#note").text("Helllo next by Primary");

});