Código funcionando no back mas não aparece no front

<div class="corpo_definir_cronograma">

<div class="cronograma">

<h1>Olá, {{current_user.nome}}, defina aqui o seu cronograma de tutoria da matéria de {{current_user.disciplina_tutorada}}</h1>

<table>

<thead>

<tr>

<td>Dia da semana</td>
<td>Horário inicial</td>
<td>Horário final</td>

</tr>

</thead>

<tbody id="tbody">



</tbody>

</table>

<button id="adicionar" type="button">adicionar</button>

<button type="submit">enviar</button>

</div>

</div>

<script src="/static/js/definir_cronograma.js"></script>

var tbody = document.getElementById(''''tbody'''')
var btn_adicionar = document.getElementById(''''adicionar'''')

contador = 0

btn_adicionar.addEventListener("click", function(){

contador++;
if (contador <= 5) {
createTr();
};
if (contador === 5) {
btn_adicionar.style.display = ''''none''''
}

})

function createTr(){

//form
var form = document.createElement(''''form'''')
form.setAttribute(''''name'''', ''''form_'''' + contador)

/* tr */
var row = document.createElement(''''tr'''')

/* td */
var td_dia = document.createElement(''''td'''')
var td_hora_inicial = document.createElement(''''td'''')
var td_hora_final = document.createElement(''''td'''')

/* select e inputs */
var select_td_dia = document.createElement(''''select'''')
select_td_dia.setAttribute(''''name'''', ''''dia_'''')

//options dos dias da semana para o select

var segunda = document.createElement(''''option'''');
segunda.value = ''''Segunda''''; // Define o valor da opção
segunda.textContent = ''''Segunda''''; // Define o texto da opção

var terca = document.createElement(''''option'''');
terca.value = ''''Terça''''; // Define o valor da opção
terca.textContent = ''''Terça''''; // Define o texto da opção

var quarta = document.createElement(''''option'''');
quarta.value = ''''Quarta''''; // Define o valor da opção
quarta.textContent = ''''Quarta''''; // Define o texto da opção

var quinta = document.createElement(''''option'''');
quinta.value = ''''Quinta''''; // Define o valor da opção
quinta.textContent = ''''Quinta''''; // Define o texto da opção

var sexta = document.createElement(''''option'''');
sexta.value = ''''Sexta''''; // Define o valor da opção
sexta.textContent = ''''Sexta''''; // Define o texto da opção

var input_td_hora_inicial = document.createElement(''''input'''')
input_td_hora_inicial.setAttribute(''''name'''', ''''hora_inicial_'''')
input_td_hora_inicial.setAttribute(''''type'''', ''''datetime-local'''')
var input_td_hora_final = document.createElement(''''input'''')
input_td_hora_final.setAttribute(''''name'''', ''''hora_final_'''')
input_td_hora_final.setAttribute(''''type'''', ''''datetime-local'''')

tbody.appendChild(form)
form.appendChild(row)
row.appendChild(td_dia)
row.appendChild(td_hora_inicial)
row.appendChild(td_hora_final)
td_dia.appendChild(select_td_dia)
select_td_dia.appendChild(segunda)
select_td_dia.appendChild(terca)
select_td_dia.appendChild(quarta)
select_td_dia.appendChild(quinta)
select_td_dia.appendChild(sexta)
td_hora_inicial.appendChild(input_td_hora_inicial)
td_hora_final.appendChild(input_td_hora_final)

}

Eu estou desenvolvendo esse código para que o usuário possa criar de maneira automática linhas de uma tabela ao clicar em um botão. O código estava funcionando perfeitamente até que eu implementei a criação de um form junto com a criação da linha, já que eu preciso enviar as informações de cada linha da tabela para o banco. A partir desse momento o código passou a funcionar parcialmente, já que não apresentava problemas no console e a estrutura do próprio código estava sendo criada ao clicar no botão, mas ela não aparecia na tela, somente nas linhas de código do navegador.