JSFiddle - React, Tailwind, and code Playground

by Marcelo Dênis

HTML

<div id="lista_status">
	<div id="status_1" statusmodelo='true' class="status col-md-12">
		<div class="box box-info">
			<div class="panel panel-default">
				
			    <div class="panel-body">
			    
					<div class="clearfix col-md-12">
						<label for='subdemanda'><input type="checkbox" value="1" class="is_subdemanda" /> Com subdemanda?</label>
					</div>
					
					<div class="clearfix" id="lista_subdemandas" style="display:none">
						<div class="clearfix col-md-12">
							<hr />
						</div>


						<div class="subdemanda" modelo="true" subdemandaid="1">
							<div class="col-md-6">
							<div class="input text"><label for="setor">Setor</label><input name="data[setor]" class="setor form-control" type="text"/></div>							<input type="hidden" name="data[id]" class="id_setor" id="id"/>							</div>
							<div class="col-md-6">
								<div class="input select"><label for="demanda">Demanda</label><select name="demanda" class="demanda form-control" id="demanda">
<option value="">&lt;&lt; selecione o setor</option>
</select></div>							</div>
						</div>
					</div>
					<div id="separador_subdemanda" class="clearfix col-md-12">
						<hr />
					</div>
					<div class="clearfix col-md-12">
						<a class="nova_subdemanda btn btn-xs btn-primary"><i class="fa fa-plus"></i> Nova subdemanda</a>
					</div>
										
				</div>
			</div>
		</div>
	</div>

	
</div>
<div class="clearfix col-md-12">
	<a id="novo_status" class="btn btn-xs btn-primary"><i class="fa fa-plus"></i> Novo status</a>
</div>
<br class="clearfix" />

JavaScript

$.fn.myShow2 = function(duration) 
	{
		return this.animate({height: "toggle", opacity: "toggle"}, duration || 500);
	};

$(document).ready(function() {
    $('.status').on('click','.is_subdemanda', function(event){
		var id = $(this).parent().parent().parent().parent().parent().parent().attr("id");
		if($( "#"+id+" #lista_subdemandas" ).is( ":visible" )){
	  		$("#lista_subdemandas").myShow2(500);

		} else {
	  		$("#lista_subdemandas").myShow2(500);
		}
	});

	$('.status').on('click','.nova_subdemanda', function(event){
		var id = $(this).parent().parent().parent().parent().parent().attr("id");
		
		var newId = $('.subdemanda').length;
		newId++;
		console.log(newId);
		$( "#"+id+" div[modelo='true']" ).clone().attr({ class: "subdemanda", modelo:false,subdemandaid:newId, style: 'display:none' }).appendTo( "#"+id+" #lista_subdemandas" );
		$("div[subdemandaid='"+newId+"']").before('<br class="clearfix" />');
		$("div[subdemandaid='"+newId+"']").myShow2(500);
		
	});

	$('#novo_status').on('click', function(event){
		var newId = $('.status').length;
		newId++;
		console.log(newId);
		$( "div[statusmodelo='true']" ).clone().attr({ id: "status_"+newId, modelo:false, style: 'display:none' }).appendTo( "#lista_status" );
		$("#status_"+newId).before('<br class="clearfix" />');
		$("#status_"+newId).myShow2(500);
		
	});
});