изменить теги на основе значения флажка

Question

[введите описание изображения здесь] [1] [мне нужно, чтобы мой дизайн был таким] [2] У меня есть 3 раздела. Одна для выбора основной категории, вторая часть для выбора подкатегории. Подкатегория находится в флажках. Проверенная подкатегория должна отображаться в новом div. Если отмеченный флажок снят, саб должен удалить форму там. Здесь я получаю основные и подкатегории. Проблема в разделе флажков. Здесь я добавляю несколько скриптов, которые в первую очередь предназначены для получения идентификатора основной категории. По этому идентификатору я проверяю, есть ли у этого идентификатора суб или нет. Если у него есть подсписок, то в новом div с идентификатором sub. Этот подпункт должен отображаться как флажок. Если подпрограмма отмечена, просмотрите их в div с id viewlist.

 Here i get subcategory from main catgeory. the issue starts from sub catgories checkbox. When i select one of the checkbox of sub it display on viewlist. then i gofor next main category and select sub it have some null tags and doesnot show the previous selelcted sub of previous main category. 

Это изображение является фиктивным дизайном. Мне нужно запустить мой код следующим образом.

   <script>
        $('#main li').click(function(){
        var mainID = this.id; 
        var mainName=$(this).text();
        // $('#mainCat').val(mainName);
        $("#sub ul").not($(this).parent()).hide();
        // $(".tagCheck").hide();
        // $("ul #views").css("display","none");
        $("#views li").html('');
        // $("#views ul li").remove();
        $('#mainCat').empty();
        if(mainID){
            $.ajax({
                type:"GET",
                url:"{{url('/select/get-sub-category')}}?main_id="+mainID,
                success:function(res){   
                if(res){  
                    // console.log(res.parent_id);
                    $("#sublist").css("display","block"); 
                    var list="<ul class='tags' id='subs'>";
                    $.each(res,function(key,value){
                        list+="<li id='"+value.id+"' class='addedTag'><label><input type='checkbox' id='check_"+value.id+"' name='checkTag[]' value='"+value.name+"' class='tagCheck'><span>"+value.name+"</span></label></li>";
                        // $("#sub").append('<li id="'+key+'" class="addedTag">'+value+'</li></ul>');
                    });
                    list+="</ul>";
                    $( "#sub" ).append(list);
                    $('input[type="checkbox"]').bind('click',function() {
                        $("#viewlist").css("display","block"); 
                        $('#mainCat').html(mainName);
                        var value = $(this).val();
                            if($(this).is(':checked')) {
                                var view="<li id='"+this.id+"' class='addedTag'>"+$(this).val()+"</li>";
                                $( "#views" ).append(view);
                            }
                            else{
                                $("#views li#"+ this.id).remove();
                            }
                    }); 

                }else{
                    $("#sub").empty();
                    $("#views").empty();
                }
                }
            });
        }else{
            $("#sublist").css("display","none");
            $("#sub").empty();
        }

        });
    </script>

        ```


  [1]: https://i.stack.imgur.com/fPNim.png
  [2]: https://i.stack.imgur.com/Ckvlb.png