В Django / Javascript - как установить флажки для нескольких ранее выбранных записей?

Question

Я новичок ie до Django. Я пробовал разные варианты решения своей проблемы, но ни один из них до сих пор не работал. Любая помощь будет высоко ценится.

Ниже мой код, я вставил только необходимые строки из моего кода. Это не полный код:

Примечание: section_data относится к типу списка (при добавлении из Django они добавляются с помощью флажков только в БД).

У меня есть это в моем template. html

<table class="table table-striped table-bordered zero-configuration">
  <thead>//table headings here</thead>
   <tbody>
      {% for row in data %}
      <tr><td>{{row.class_name}}</td><td>{{row.section_data}}</td>
          <td><a href="#" data-toggle="modal" data-academic_year="{{row.academic_year}}" data-class_name="{{row.class_name}}" data-section_data="{{row.section_data}}" data-id="{{row.id}}" class="ls-modal"><i class="icon-note menu-icon"></i></a></td></tr>
      {% endfor %}     
   </tbody>
</table>

При нажатии на значок-заметку выше откроется всплывающее окно с именем класса и разделом. Этот значок используется для редактирования. Итак, во всплывающем окне я показываю все разделы, доступные в БД, но с помощью JS я хотел проверить все те значения, которые уже были выбраны для этого, при добавлении в БД через сам Django: ниже приведен код всплывающего окна, который был написан в том же html шаблоне, что и выше

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <div class="modal-body">
           <div class="form-group">
             <div class="form-check form-check-inline">
             {% for row in section_vals %}
             <input type="checkbox" name="sections_checkbox_edit" class="form-check-input" id="option_data" value="{{row.section_name}}">
             <label for="option_data" class="form-check-label">{{row.section_name}}</label>&nbsp;&nbsp;&nbsp;&nbsp;
             {% endfor %}
             </div></div></div></div></div></div></div>

Ниже мой JS код, который был помещен между и в том же шаблоне:

$('.ls-modal').on('click', function(e){
        e.preventDefault(); 
        var a = $(this).data('section_data');
        var arr = a.replace(/[\[\]'"]+/g,'');
        check_value(arr);
        $('#editModal').modal('show').find('.modal-body');
        }
function check_value(val){
        var arr1 = val.split(", ");
        for (i=0;i<arr1.length;i++){
             $("input[type=checkbox]").each(function(){ 
                    if( $(this).val() == arr1[i]){
                    $(this).attr('checked','checked');
                    } 
             });
            }
        }

Ошибка: класс | section class1 ['B'] - во всплывающем окне B показано как проверено - мы хороши в этом случае. class2 ['C'] - Здесь B и C показаны как проверенные. class3 ['A', 'B'] - при третьем щелчке над двумя (B, C) и новым флажком A все три будут показаны как проверенные.

Выше проблема с текущим JS. Я понимаю, почему возникает эта ошибка (это происходит из-за $ ("input [type = checkbox]"), но я не вижу никакой другой опции, ни для проверки флажков, ни для снятия флажков, которые уже были выбраны для другие строки. Я пробовал несколько вариантов. Пожалуйста, помогите мне в проверке уже выбранных флажков, которые соответствуют приведенному выше коду.