JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divMain"  style="width: 100%; height: 100%; margin:0px; padding:0px;"> 
</div> 


<div id="controls">

    <button id="add_sprite" class="add_sprite">Add Sprite</button>

</div>
<div id="formContainer">
    <form id="frm" />
</div>

CSS

.sprite_container{
	width:10%; height:10%; position:absolute; top:0px; left:0px;
}

#add_sprite {
    float:right;
}
#controls {
    width:100%; height:100px; background:#ddd;
    
}
.sprite{
	width:100%;
    height:100%;
    background-color: #a44;
    position:absolute;
    top:0px;
    left:0px;
}

.sprite_animationA{
    width:400px;
}

.pulse{
	background-color: #CF6;
}

.star{
	background-color: #3F9;
}

.square{
	background-color: #306;
}

JavaScript

$(function(){

	var spriteId = 1;
	$(".add_sprite").click(function() {
  		$("<div />", { "class":"sprite_container", id:"sprite_container"+spriteId })
		.append($("<div />", { "class":"sprite" , id:"sprite"+spriteId }))
     	.appendTo("#divMain");
  		spriteId++;
	});
	
	var controlsId = 1;
	$(".add_sprite").click(function(e) {
  		$("<div />", { "class":"sprite_controls", id:"sprite_controls"+controlsId })
		//Sprite Name
		.append($("<input />", {"class":"sprite_name", type: "text", value: "Name It", id:"name"+controlsId }))
     	
		//Sprite Animation A
		.append($("<select/>", { "class":"sprite_animationA", id:"animationA"+controlsId })
			.append($("<option />", { value:"Animate It"})
				.append("Animate It")
			)
			.append($("<option />", { value:"Pulse"})
				.append("Pulse")
			)
			.append($("<option />", { value:"Star"})
				.append("Star")
			)
			.append($("<option />", { value:"Square"})
				.append("Square")
			)
		)
     	.append($("<button/>", { "class":"run_it", id:"run_it"+controlsId })
			.append("Run It")
		)
		.appendTo("#frm");
  		controlsId++;
	});

	$('#formContainer').delegate('button','click',function (e) {
        console.log(e);
        e.preventDefault();
        var frm = $(e.target).parent()[0];
        var anim = $($(frm).children('select')[0]).val();
        var idx = frm.id.split("sprite_controls")[1];
        console.log('clicked', anim,idx);        
        switch (anim) {
            case 'Pulse':
            case 'Star':
            case 'Square':
                $("#sprite_container"+idx).addClass(anim.toLowerCase());
                break;
        }
    });	 
    
});