php – AJUDA: FUNÇÃO JS QUE REESCREVE DIV MAS SOME COM INPUT

inserir a descrição da imagem aqui

Olá pessoal. Preciso de uma ajuda.
No formulário acima, eu tenho 2 funções js que fazem requisição assíncrona para alterar os dados da tabela e remontar a lista do check após a inserção de uma nova categoria.

Em resumo o funcionamento é assim:

A página é carregada e neste momento eu listo todas as categorias encontradas na tabela de categorias. Atribuo o evento click a uma função assíncrona que, grava em outra tabela os itens selecionados.

Abaixo vou colocar a parte do código onde crio a lista e a função em js que faz a requisição. Importante ressaltar aqui que, quando clico em um check, o sistema envia todos os inputs via post, inclusive o que é foco aqui, que é o input de nome (categoria_check).

<div id='listado'>
<?php foreach ($categorias as $categoria) { ?>
<input type="checkbox" value="<?=$categoria('id')?>" name='categoria_check(<?=$categoria('id')?>)' onclick='check_categoria()'>                 <?=$categoria('categoria_post_nome')?><br>
<?php } ?>
</div>

Agora o código da função que faz a requisição e envia o post para um outro arquivo fazer o tratamento dos dados:

function check_categoria() {
xhttp = new XMLHttpRequest();
xhttp.open("POST", "requisicao.php?acao=checkCategoria");
xhttp.send(new FormData(document.getElementsByName("blog")(0)));
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {            lista_categoria2.innerHTML = this.responseText;
}
};
}

Até aí, tudo está funcionando muito bem. Alguém pode me pedir para ver o que rola na requisição mas peço que confie em mim, isso não é importante. Funciona bem e escreve perfeitamente os dados no banco.

O problema começa com a outra função, quando o usuário insere a categoria. A função ‘add_categoria’ funciona da seguinte maneira:

  1. recebe os dados via post;
  2. trata esses dados através de uma rotina php, grava no banco;
  3. reescreve a lista de check devidamente atualizada.

Vou colocar abaixo a função js que faz a requisição e o trecho do código onde a lista de checks é reescrita:

function add_categoria() {
xhttp = new XMLHttpRequest();
xhttp.open("POST","requisicao.php?acao=adicionaCategoria");  xhttp.send(new FormData(document.getElementsByName("blog")(0)));
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {            listado.innerHTML = this.responseText;
}
};
document.getElementById("nova_categoria").value="";
}

Atenção para a linha “listado.innerHTML = this.responseText;” do código acima, ela é responsável por imprimir na página a reescrita da lista dentro da div ‘listado’ como está na página inicial. Essa linha sobrescreve a div ‘listado’ atualizando a lista.
Abaixo o trecho do código (php + html) onde a lista é reescrita:

echo $msg_erro;
foreach ($categorias as $categoria) {        if(in_array($categoria('id'), $array_categorias)) {            $status_check = 'checked';
} else 
{ $status_check = '';
} 
$idCategoria = $categoria('id');
$nomeCategoria = $categoria('categoria_post_nome');
// aqui é montada a lista
echo "<input type='checkbox' value='$idCategoria' name='categoria_check($idCategoria)' onclick='check_categoria()' $status_check>";
echo " " . $nomeCategoria . '<br>';
}

Você não precisa entender o código, apenas saber que tudo que está entre as aspas depois do ‘echo’ vai ser reescrito lá na div ‘listado’.
Até aí tudo OK. Eu inspecionei a página após esta função ser executada e ela fica EXATAMENTE IGUAL antes da função ser executada, sobretudo a div ‘listado’. Não altera nada, claro, apenas os itens adicionados.
Agora é que vem o problema (ufa!):
Lembra da primeira função ‘checkCategoria’ que trata os clicks nos checks? Só pra recordar, essa função envia via post os inputs. SÓ QUE, depois que eu executo a função que adiciona novas categorias e a lista de checks é reescrita, quando clico no check, ele envia via post todos os inputs MENOS o input (check_categorias), mesmo ele estando corretamente codificado. A função simplesmente ignora esse input, e este nem aparece listado na carga útil da requisição, inviabilizando assim a função que trata os clicks nos checks.
A pergunta é: por quê? Não faz sentido, pois quando reescrevo a lista a mesma é montada EXATAMENTE igual à lista montada na carga inicial da página, o input com seu respectivo name, id, value, tudo continua lá, MAS não envia o input reescrito na carga útil da requisição.
Alguém já passou por isso ou tem ideia de como posso solucionar?
Grato!!!!