JSFiddle - React, Tailwind, and code Playground
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=""><< 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);
}
});
$('#lista_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);
});
});