Why am I losing the values of <input> when opening and closing a <iframe> using Javascript?

Question

Context: I have an application, which uses php+html+css+javascript(with jquery). On it I have a page called principal.php containing an iframe: <iframe src=pedido.php/> inside calling the pedido.php, as we can see. Inside the page pedido.php I have several <input type=text> and there’s a specific one that I want to fill out with data, next to it we have a lupa that by clicking on it I run the following javascript function:

function buscaIndicou(id_elemento){
  var parametros = "?disablebuttons=true";
  var width          = $(window).width()+"px";
  var height         = $(window).height()+"px";
  var $div           = $("<div />", { "class":"overflow-box"}).css({"width":width,"height":height});
  var $close         = $("<div />", {"class":"close"}).click(function(){
    $('.overflow-box').remove();
    $('.modal').remove();
    $('.close').remove();
    if (getCookie("IDPessoaModal") == "")
        alert("Ocorreu um erro ao selecionar a Pessoa, tente novamente.");
    else{
      var id  = getCookie("IDPessoaModal");
      var nm  = getCookie("NMPessoaRel");
      var ele = getCookie("TargetEdit");
      $('#'+ele).val(nm);
      $('#'+ele).attr('data-id',id);
      deleteCookie("BuscaDoPedido");
    }
  });
  $('#pnlContent').append($div);
  var html  = '<div class=modal>'+
              '<iframe width="987" height="426" frameborder="0" scrolling=no src="listapessoa.php'+parametros+'" id="mainFrame">'+
              '</div>';
  $('#pnlContent').html($('#pnlContent').html()+html);
  $('.modal').append($close);
}

This code opens a <iframe> on my screen looking modal, then I go there choose a Person in the list, except in the cookies that I use there later in the event of click() of div.close and then I click on div.close that gives a .remove() in everything I’ve created.

Problem: When the elements I created are removed, and I see mine again <input> and the magnifying glass, the information is carried to him correctly, however, all the others <input> that I had filled, are empty.

Because they were empty if I didn’t recharge or close the <iframe src=pedido.php> and just created another <iframe> inside it after I closed?

Note: I’m sure there is no problem with PHP or HTML code, so I didn’t post any of them, but if you insist I can try to create a similar example because my PHP+HTML code is difficult to understand and is huge.

Answer 1

$('#pnlContent').html($('#pnlContent').html()+html);

You are overwriting your HTML. Use this:

$('#pnlContent').after(html);