JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
		<h2>Dynamically Created Using Jquery.</h2>
		<div id="form"></div>
	</div>

JavaScript

$(function () { 
	//---------------------Q1--------------------
	$('div#form').append(
		//*************************** Header ************************
		$("<h2/>").text("Login Form"),
		$("<h5/>").text("Please Fill Up This Form!!!"),
		$('<hr/>'),
		//**************************** Form *************************
		$("<form/>",{action: "", method: ""}

		).append(
		//User Id Field
		$("<label/>").text('User Id: '),
		$("<input/>",{type: 'text', id: 'userId', placeholder: 'User ID'}),
		
		$('<br/>'),
		$('<br/>'),
		//Password Field
		$("<label/>").text('Password: '),
		$("<input/>",{type: 'Password', id: 'pw', placeholder: 'Password'}),
		
		$('<br/>'),
		$('<br/>'),
		//Select Field
		$("<label/>").text('Site: '),
		$("<select/>",{id: 'select'}),

		$('<br/>'),
		$('<br/>'),
		//Remember Me Checkbox
		$("<input/>",{type: 'checkbox'}),
		$("<label/>").text('Remember Me'),
		
		$('<br/>'),
		$('<br/>'),

		$("<button/>",{type:'Submit'}).text('Sign In'),
		$('<span/>')
		)
	);
	//---------------------Q2 & Q3 (Alert & Validations)--------------------

	$('#form').submit(function (event) {
		//getting elements
		var id=$('#userId').val();
		var pw=$('#pw').val();
		//validating

		//$('span').text('These Fields Are Required...').show().fadeOut(100);
		

  		if ( id !== "" && pw !=="") {
    		var json={'User Id':id,'Password':pw};
			$.each(json,function(p,v){
    			alert(p+": "+v);
			});
			return;
  		}
  		else if( id.indexOf(' ')>=0 ){
	  		$( "span" ).text( "User Id Cannot Contain Space!" ).show().fadeOut( 1000 );
	  	}	  	
	 	if(id==="" || pw==="" || id.indexOf(' ')>=0)
	 	{
			$( "span" ).text( "Some Feilds are Required!" ).show().fadeOut( 1000 );
	  	}
	  	event.preventDefault();
		});

});