how to replicate dynamic table

Question

how do I load exactly the same structure I create on another screen?

Next, I have this sign-up screen where clicking the "+" button will add text type inputs (as per code attached) My problem is that this creation is dynamic, one can add either 1, or 2,3,4.. I mean N. I’m going to save this data and I need to replicate that same structure on another screen. That is, it will load all the text inputs created on the addition screen. How can I "copy" every structure and replicate on another screen?

Answer 1

Come on.

var copia;

function loadEditLabel() {
  // Salva o novo input saindo do campo ou apertando enter
  $('[contenteditable="true"]').focus().select().keydown(function(event) {
      if (event.key == 'Enter') { // Checa se a tecla digitada foi o Enter
        $(this).prev('input').val(this.innerHTML); // Colocar o value do input com o texto digitado
        $(this).prop('contenteditable', false); // Desabilita o campo de edição
      }
    })
    .blur(function() {
      $(this).prev('input').val(this.innerHTML);
      $(this).prop('contenteditable', false);
    });
}

$('#add').click(function() {
  html = '<div class="itens">';
  html += '<div id="radios"><input type="radio" disabled style="vertical-align: text-bottom;" value="teste" name="data"><input type="text" value="" class="form-control radio-alinha text" placeholder="Adicionar Alternativa"><a href="#" class="del"><span class= "glyphicon glyphicon-trash"></span></a></div></div>';
  //html += '<input type="text" placeholder="Nova Entrada">';
  //html += '<a href="#" class="del"><span class= "glyphicon glyphicon-trash"></span></a></div>';

  $('#campos').append(html); // Adiciona o novo input dentro da div radios

  loadEditLabel(); // Carrega o radio para a edição

$(function(){
    $('.del').click(function(event){
      event.preventDefault();   
    $(this).parent().remove();
    });
});

});

$('#btnexp').on('click', function(){
  
    copia = $('#exp').html();
  
});

$('#btnexibir').on('click', function(){
  
    $('.copiada').html(copia);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
                     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                     <div class="form-group esconder" id="id_TME">
                        <div class="panel panel-default" id='exp'>
                           <div class="panel-body">
                              <div id="multipla-escolha">
                              </div>

                              <div id="campos"></div>
                              <button id="add" class="btn btn-primary btn-md">
                              <span class="glyphicon glyphicon-plus" aria-hidden="true">                                  
                              </span>
                              </button>


                           </div>
                        </div>
                        <button ng-click="adicionaTarefa()" type="button" class="btn btn-primary btn-md" data-dismiss="modal" id="btn-cadastra-tarefa"><span class="glyphicon glyphicon-ok-sign"></span> Salvar</button>
                     </div>

<div id='btnexp'>Copiar</div>
<div id='btnexibir'>Exibir Copia</div>

<div class='copiada'></div>

      <script src="bootstrap/js/bootstrap.min.js"></script>

What has been done

I created a global variable called copia that will receive all content from the class div panel panel-default, I created a id='exp' for her.

the event .html() jquery receives ALL content from the selected div.

we apply all that content to the variable copia. And then we assign the contents of this variable to another div, so that the copy is made.

To view the operation do what you want with the inputs, then click copy and then view copy.

Remembering that I am showing you how to replicate the exact content of the div. You will have to adapt to your own code.