JSFiddle - React, Tailwind, and code Playground

by ureech

HTML

<div id="f_options_context_list" class="form-group field ft_listmultiple child_field">
    <div class="input_checkbox_list" id="options_context_list">
        <input onclick="SelectCtype('1','1_in');" type="checkbox" name="ctype-check[]" class="form-check-input" value="1" id="1">
        <div id="" class="custom-control custom-checkbox mb-1"><label class="form-check-label" for="">Страницы</label></div>

        <div id="" class="form-group field ft_listmultiple child_field">
            <div class="input_checkbox_list" id="">
                <div id="1_in" style="display: none;">
                </div>
            </div>
        </div>

        <input onclick="SelectCtype('5','5_in');" type="checkbox" name="ctype-check[]" class="form-check-input" value="5" id="5">
        <div id="" class="custom-control custom-checkbox mb-1"><label class="form-check-label" for="">Статьи</label></div>

        <div id="" class="form-group field ft_listmultiple child_field">
            <div class="input_checkbox_list" id="">
                <div id="5_in" style="display: none;">
                </div>
            </div>
        </div>

        <input onclick="SelectCtype('6','6_in');" type="checkbox" name="ctype-check[]" class="form-check-input" value="6" id="6">
        <div id="" class="custom-control custom-checkbox mb-1"><label class="form-check-label" for="">Посты</label></div>

        <div id="" class="form-group field ft_listmultiple child_field">
            <div class="input_checkbox_list" id="">
                <div id="6_in" style="display: none;">
                </div>
            </div>
        </div>

        <input onclick="SelectCtype('7','7_in');" type="checkbox" name="ctype-check[]" class="form-check-input" value="7" id="7">
        <div id="" class="custom-control custom-checkbox mb-1"><label class="form-check-label" for="">Фотоальбомы</label></div>

        <div id="" class="form-group field ft_listmultiple child_field">
            <div...

JavaScript

function SelectCtype(id,div_id) {

inp = document.getElementById(id);
div = document.getElementById(div_id);

if (inp.checked){
 
    $.ajax({
        type: 'POST',
        url: '',
        data: {
            'ctype_id': id
        },
        success: function (data) {
            if (typeof data === "string" && data !== null) {
            var obj = JSON.parse(data); 
            div.style.display = "block";          
            $(div).html(obj);   
            }       
        }
    });
    
}else{
    
    div.style.display = "none";
}

}