JSFiddle - React, Tailwind, and code Playground

by Andry Zirka

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <div id="box">
    <div id="source"></div>
	</div>
<input id="button" type="button" name="button" value="Push me!">

CSS

#balls {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: red;

		position: relative;
		left: 10%;

	}
	
	#source{
		position: relative;
		left: 10%;
	}



	#box {
		width: 300px;
		height: 300px;
		border-style: solid;
		border-color: black;
		border-width: 0 10px 20px;
	}

	#button {
		position: relative;
		left: 20%;
	}

JavaScript

$(function() {


	$(document).on("click", '#button', function(){

		$('#source').append('<div id="balls">');
		
	})

});