Js и Django

Python
#1

у меня есть js файл, который должен добавлять добавленного ученика в черновик:

<script type="text/javascript">
      $(".txtb").on("keyup",function(e){
        
        if(e.keyCode == 13 && $(".txtb").val() != "")
        {
          var task = $("<div class='task'></div>").text($(".txtb").val());
          var del = $("<i class='fas fa-trash-alt'></i>").click(function(){
            var p = $(this).parent();
            p.fadeOut(function(){
              p.remove();
            });
          });

          var check = $("<i class='fas fa-check'></i>").click(function(){
            var p = $(this).parent();
            p.fadeOut(function(){
              $(".comp").append(p);
              p.fadeIn();
            });
            $(this).remove();
          });

          task.append(del,check);
          $(".notcomp").append(task);
           
          $(".txtb").val("");
        }
      });
    </script>

так как в var task = $("<div class='task'></div>").text($(".txtb").val()); указанно txtb, а в {{ form.as_p }} этого нет, то визуально(с анимацией и прочим) этого не происходит(добавление ныне добавленного ученика в черновик) как можно это исправить?

#2

Непонятно о чем речь.

Тут же просто в HTML добавляется что-то, серверу ничего не отправляется.

#3 
<body>
  	{%bootstrap_css%}
    <div class="container">
      
      <form enctype="multipart/form-data" method="POST">
    	
    	{% csrf_token %}
    	
      {{form.as_table}}
    	
    	<input type="submit" name="сохранить">
      </form>
      
      <div class="notcomp">
        <h3>черновик</h3>



      </div>

      <div class="comp">
        <h3>ученик класса</h3>
        
      </div>
    </div>

По задумке ученик, добавленный в форме должен добавляться в черновик, но так как изначально вместо формы было <input type="text" class="txtb" placeholder="добавить ученика">, то весь интерфейс пропал (кнопки удаления и прочее ). Как можно изменить форму, чтобы ученики, занесенные туда добавлялись в черновик и при работе шаблонизатора это все не ломалось ( ведь как я понял, при обновлении страницы ученики в черновике пропадут )?

#4

Ну для этого надо например

  • Отправлять форму через ajax.
  • После отправки запрашивать (или возвращать в ответ на запрос добавления) у сервера HTML фрагмент или все нужные данные для его создания (id элемента в БД, …) и добавлять в список с кнопкой удаления и т.п.
  • При открытии страницы выводить эти списки на сервере.

По “django ajax” наверно можно нагуглить примеры подобного.

Еще можно освоить React, с ним такое может быть проще сделать.