JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<div id="output">
</div>

<button id="add">Add One More Element
</button>

<button id="validate">Validation (Non-Submit Button)
</button>

CSS

#output {
  border: 1px solid black;
}

JavaScript

createForm1();

$('#validate').click(function() {
	$('#form').valid();
});

$('#add').click(function() {
    // Disable the Add button -- we're only testing one click here
    $('#add').prop('disabled', true);
    $('#questions').append(
                        '  <div> ' +
                        '    <span class="questionTitle">Input Added: </span> <br/>' + 
                        '    <input type="text" id="textAdded"></input> ' + 
                        '  </div>');
                        
    // (Re-)append validator
	  $("#form select, #form input:not(input[type=button], input[type=submit], input[type=hidden])").each(function(){
		   $(this).rules("add", { required: true } );
    });	 
});

function createForm1() {
    
    $('#output').append('<div id="questions"> ' + 
                        '  <div> ' +
                        '    <span class="questionTitle">Input 1: </span> <br/>' + 
                        '    <input type="text" id="text1"></input> ' + 
                        '  </div>' +                        
                        '</div>'
    
    );
    // Enclose in a form tag
		$('#questions').wrap("<form id='form'></form>");	    
    
    // Add jQuery validation
    $("#form").validate({
    /*
		   errorPlacement: function(error, element) {
			    error.insertAfter($(element).siblings('span.questionTitle')[0]);
		   }    
       */
    });
    // Add first-level validators
	  $("#form select, #form input:not(input[type=button], input[type=submit], input[type=hidden])").each(function(){
		   $(this).rules("add", { required: true } );
    });	            
    
}