Using multiple input fields

I am currently reworking the Classplan website of my school and wanted to implement filters for the different subjects a user may be in. It should save it as a List in a single database field. The database is already created and in theory the filters already work.
My problem is that the user currently can only enter their class and not the specific subjects. I already found some javascript to enable me to add a button so the user can add another input field but the profile update form just adds the last element although the POST method returns a list with all input values. The documentation references MultiValue fields but it is very vague and I don’t think that it fits my needs. One of my thoughts was to manually read out the POST method and add the data to the database but I don’t think that is a good procedure.
The HTML I found for multiple input fields (source):

<head>

  <title>Bootstrap Jquery Add More Field Example</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>

<body>

<div class="container">

  <div class="panel panel-default">

    <div class="panel-heading">Bootstrap Jquery Add More Field Example</div>

    <div class="panel-body">


        <form action="action.php" >


      	<div class="input control-group after-add-more">

          <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">


            <a class="add-more" href="#"><i class="glyphicon glyphicon-plus"></i> Add</a>


        </div>

        </form>

        <!-- Copy Fields -->

        <div class="copy hide">

          <div class="control-group input-group" style="margin-top:10px">

            <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">

            <div class="input-group-btn"> 

              <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>

            </div>

          </div>

        </div>


    </div>

  </div>

</div>


<script type="text/javascript">

    $(document).ready(function() {


      $(".add-more").click(function(){ 

          var html = $(".copy").html();

          $(".after-add-more").after(html);

      });


      $("body").on("click",".remove",function(){ 

          $(this).parents(".control-group").remove();

      });


    });

</script>


</body>

</html>

My implemantation in Django:


and my views.py:

It would be best if the view makes as many input fields as the users subjects with the subject prefilled when the user already entered some subjects.
I would appreciate your help.