JSFiddle - React, Tailwind, and code Playground

HTML

<form class="form-horizontal" id = "form" method="POST" action="">
    <div class="form-group">
        <label for="direction" class="col-xs-3 control-label">Направления:</label>
        <div class="col-xs-9">
            <ul class="ul-treefree ul-dropfree">
                <li>
                    <div class='drop'></div><label><input type='checkbox'/>Кормовая часть</label>
                    <ul>
                        <li>
                            <div class='drop'></div><label><input type='checkbox'/>Комбикорм, БМВК</label>
                            <ul>
                                <li>
                                    <div class='drop'></div><label><input type='checkbox'/>Молочные продукты</label>
                                    <ul>
                                        <li>
                                            <label><input type='checkbox' name='classes[]' value='17'/>ЗЦМ</label>
                                        </li>
                                        <li>
                                            <label><input type='checkbox' name='classes[]' value='18'/>ЗОМ</label>
                                        </li>
                                        <li>
                                            <label><input type='checkbox' name='classes[]' value='19'/>Молочная сыворотка</label>
                                        </li>
                                        <li>
                                            <label><input type='checkbox' name='classes[]' value='20'/>БЖК</label>
                                        </li>
                                        <li>
                                            <div class='drop'></div><label><input type='checkbox'/>Сухое молоко</label>
                                            <ul>
                                                <li>
                                                    <label><input type='checkbox' name='classes[]' value='22'/>Сухое...

CSS

.list-select ul { display: none;}
.list-select li:hover > ul { display: block;}
ul.ul-treefree { padding-left:25px;}
ul.ul-treefree ul { margin:0; padding-left:6px; }
ul.ul-treefree li { position:relative; list-style:none outside none; border-left:solid 1px #999; margin:0; padding:0 0 0 19px; line-height:23px; }
ul.ul-treefree li span {font-size: 20px; cursor:pointer; margin-left: 5px; }
ul.ul-treefree li:before { content:''; display:block; border-bottom:solid 1px #999; position:absolute; width:18px; height:11px; left:0; top:0; }
ul.ul-treefree li:last-child { border-left:0 none; }
ul.ul-treefree li:last-child:before { border-left:solid 1px #999; }
ul.ul-dropfree div.drop {
  width:11px;
  height:11px;
  position:absolute;
  z-index:10;
  top:6px;
  left:-6px;
  background-image:   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');
  background-position:-11px 0;
  background-repeat:no-repeat;
  cursor:pointer;
}
    
.shine {
    -moz-text-shadow:0 0 10px #c00; 
    -webkit-text-shadow:0 0 10px #c00; 
    text-shadow:0 0 10px #c00;
}

JavaScript

$(document).ready(function() {
    $(".ul-dropfree div.drop").click(function() {
            if ($(this).nextAll("ul").css('display')=='none') {
                    $(this).nextAll("ul").slideDown(400);
                    $(this).css({'background-position':"-11px 0"});
            } else {
                    $(this).nextAll("ul").slideUp(400);
                    $(this).css({'background-position':"0 0"});
            }
            setTimeout( function () {
              $('#myModal').modal('handleUpdate');
              } , 500 );
    });
    
    $(".ul-dropfree").find("ul").slideUp(400).parents("li").children("div.drop").css({'background-position':"0 0"});
});