reuse jquery clones in another div

-1

I have a Html section that is cloned and populated through jquery , however I need to use the same cloned structure in another location, keeping clear the first cloned if they were two places with the same clones - I do not know and possible - but when I add the cloned structure to the new site only appears in one place and not in the two places I want, I know that it is possible to clone angular structures with ease, but for some reasons I'm using jquery , I wanted to know an efficient way to solve this problem, and if this is correct, reuse the cloned structure in a new location.

jquery

function containerClones() {
/*public methods*/
var $atividadeContainerTasks = $(".containerTasks");
var $atividadeData = $(".descricaoData").clone(true);
var $atividadeDefaultask = $(".task").clone(true);
var $atividadetaskDetail = $(".taskDetail").clone(true);
var $containerBoxCalendario = $(".box-calendar").clone(true)
var $asideTarefascontainer = $(".asideTarefas");



/*private methods*/
function fillAtividadeController(atividade) {

    //$atividadeContainerTasks.append($atividadeData);

    $.each(atividade, function (index, item) {
        var taskDefaultClone = $atividadeDefaultask.clone();
     //    var asideDefaultClone = $atividadeDefaultask.clone();

        fillAtividadeWeek.call(this, item, taskDefaultClone);

       $asideTarefascontainer.append(taskDefaultClone);
       $atividadeContainerTasks.append(taskDefaultClone);

        //fillAtividadeWeek.call(this, item,asideDefaultClone);
       // $asideTarefas.append(asideDefaultClone);
    });
};
function fillAtividadeWeek(atividade, $atividadeDefaultask) {

    //$atividadeDefaultask.prop("id", "taskTitleText" + atividade.ID);
    $atividadeDefaultask.data("atividade", atividade);
    $atividadeDefaultask.find(".taskToDo").attr("data-target", "#task" + atividade.IdAtividadeAgenda);
    $atividadeDefaultask.find(".taskDetail").prop("id", "task" + atividade.IdAtividadeAgenda);


    $atividadeDefaultask.find(".atividadeQuinzenal").text(atividade.Descricao);
    $atividadeDefaultask.find(".autorAtividade").text(atividade.Descricao);
    $atividadeDefaultask.find(".detailTarefa").text(atividade.Descricao);

    $atividadeDefaultask.find(".detailObservacao").text(atividade.Descricao);
    $atividadeDefaultask.find(".taskTitleText").text(atividade.Descricao);

}
/*WS calls*/
function getAtividade() {

    var atividade = [
        {

            Descricao: "teste1",

        },
        {

            Descricao: "teste2",



        },
    ];
    fillAtividadeController(atividade);
}

html          

        <div class="m-b-15 containerTasks">
            <h4 class="descricaoData text-primary m-b-5">Hoje - 06 de Novembro
            </h4>
            <div class="panel panel-default task">
                <div class="panel-heading clearfix taskToDo" data-toggle="collapse" data-target="#collapse1">
                    <span class="taskTitle col-sm-10 col-xs-9">
                        <span class="checkTask"><i class="fa fa-check" aria-hidden="true"></i></span>
                        <span class="taskTitleText">limpeza da piscina</span>
                    </span>
                    <span class="col-sm-1 col-xs-2 text-center text-danger">01/10</span>
                    <span class="col-sm-1 col-xs-1 text-center">
                        <i class="taskIcon glyphicon glyphicon-chevron-down"></i>
                    </span>
                </div>
                <div class="panel-collapse collapse taskDetail clearfix" id="collapse1">
                    <div class="taskForm">
                        <div class="pull-right">
                            <a href="#" class="trashBtn btn btn-default btn-sm"><i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;Excluir</a>
                        </div>
                        <small class="atividadeQuinzenal text-muted m-l-10">Atividade quinzenal, criada por <i class="autorAtividade">Autor</i></small>
                        <br />
                        <p class="detailTarefa">
                            detalhes <br />
                        </p>

                        <div class="ObsTask col-sm-12 col-xs-12">


                            <small class="textoObservacao text-muted">enviado: 07/11/17</small><br />
                            <p class="detailObservacao">observacao</p>
                        </div>

                        <div class="ObsTask col-sm-12 col-xs-12">
                            <div>


                                <small class="detailObservacao text-muted">enviado: 07/11/17</small><br />
                                <p class="detailObservacao">observacao</p>
                            </div>
                        </div>
                    </div>
                    <div class="SendObsTask col-sm-12 col-xs-12">
                        <div>
                            <textarea class="form-control" placeholder="Escreva uma observação" rows="2"></textarea>
                            <a href="#" class="btn btn-primary btn-sm m-t-5 pull-right">
                                <i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;Enviar
                            </a>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>    

New structure for clones

<div class="box-white clearfix m-t-15">
    <div id="calendar" class="col-sm-8 col-xs-12 nomargin nopadding">
    </div>
    <div class="col-sm-4 asideTarefas">
        <h1>Tarefas</h1>
    </div>
</div>
    
asked by anonymous 11.12.2017 / 14:52

1 answer

0

I defined a new variable for the clone using its properties elsewhere

var taskDefaultClone = $atividadeDefaultask.clone(true);
            var taskSubDefault = taskDefaultClone.clone(true);

            fillAtividadeWeek.call(this, item, taskDefaultClone);
            fillAtividadeWeek.call(this, item, taskSubDefault);

            $atividadeContainerTasks.append(taskDefaultClone);
        $containerSubTarefas.append(taskSubDefault)
    
14.12.2017 / 19:45