JSFiddle - React, Tailwind, and code Playground

HTML

<a id="add-room" href="#">Add room</a>
<div id="additional-room">
    <strong>test</strong>

</div>

CSS

div { padding:20px 0; background:#eee;}
p { background:red;}

JavaScript

$(document).ready(function(){
	$("#additional-room").hide();
	
	var numAdd = 0;
	$("#add-room").click(function(e) {
		e.preventDefault();
		$("#additional-room").show("");
		
		if (numAdd >= 3) return;
		numAdd++;
		$('#additional-room').append('<p><input type="text" placeholder="room"></input><a href="#">delete</a></p>');
	});
	
	$("#additional-room").on('click','a',function(e) {
		e.preventDefault();
		$(this).parent().remove();
		numAdd--;
		if (numAdd < 1) $("#additional-room").hide("");
	});
});