Как правильно добавлять класс active?

$('.law-face__item-toggle').on('click', function(e){ 
  if ($(this).hasClass('active')) { 
    $(this).removeClass('active').closest('.law-face__item').removeClass('active'); 
  } else { 
    $('.law-face__item-toggle, .law-face__item').removeClass('active'); 
    $(this).addClass('active').closest('.law-face__item').addClass('active'); 
  } 
}); 

/* law */ 
.moduletable.law-faces {margin: 0 auto 145px;}  
.law-title {font-size: 45px;color:#3C3C3C;font-weight: 800;margin:0 0 40px;} 
.law-title span {font-size: 23px;font-weight: 600;color:#ABABAB;margin-right: 11px;} 
.law-face {-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;-o-flex-wrap: wrap;flex-wrap: wrap;} 
.law-face__item {background: #fff;padding: 0;box-shadow: 1px 0 0 0 #DFDFDF, 0 1px 0 0 #DFDFDF, 1px 1px 0 0 #DFDFDF, 1px 0 0 0 #DFDFDF inset, 0 1px 0 0 #DFDFDF inset;min-height: 197px;height: 197px;} 
.law-face__item-inner {padding: 28px 48px 26px 34px;position: relative;} 
.law-face__icon {font-size: 41px;margin: 0 0 25px;} 
.icon-advocat {width:1.022em;height: 1.139em;} 
.icon-nalog {width: 1.341em;height: 1.122em;} 
.icon-corp {width: 1.017em;height: 1.031em;} 
.icon-reg {width: 0.797em;height: 0.975em;} 
.icon-arrow-right {fill:#525252;width: 24px;height: 8px;margin-left: 8px;transition: all ease .3s;} 
.law-face__item h3 {font-size: 17px;color:#000;margin:0 0 16px;line-height: 1.12;min-height: 36px;} 
.law-face__item h3 a {text-decoration: none;} 
.law-face__link {color:#484848;font-size: 15px;transition: all ease .3s;display: block;} 
.law-face__link:hover .icon-arrow-right {fill:#FF4E4E;transform: translateX(5px);} 
.law-face .moduletable {margin: 0;} 
.law-face__item-toggle {width: 22px;height: 22px;background: url(../images/icons/line.svg) 0 -10px/cover no-repeat;border:none;position: absolute;right: 31px;top: 32px;cursor:pointer;} 
.law-face__item-toggle.active {background:url(../images/icons/krest.svg) center center no-repeat;} 
.law-face__list {display: none;} 
.law-face__list li {line-height:1;margin:0 0 12px;} 
.law-face__list a {color: #555555;font-size: 15px;} 
.law-face__item.active .law-face__item-inner {box-shadow: 0px 24px 34px rgba(0, 0, 0, 0.14);background: #fff;position: relative;z-index: 1;width: calc(100% + 1px);padding: 28px 46px 40px 34px;border: 1px solid #DFDFDF;} 
.law-face__item.active .law-face__list {display: block;margin:0 0 60px;} 
/* law_end */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="moduletable law-faces"> 
<section class="moduletable law-faces"> 
						 
 
<div class="custom law-faces container"> 
	<h2 id="yur" class="law-title"><span>1.</span> Для юридических лиц</h2> 
  
<div class="d-flex law-face"> 
  <div class="col-md-4 law-face__item"> 
    <div class="law-face__item-inner"> 
      
    <svg class="law-face__icon icon-advocat"><use xlink:href="#advocat"></use></svg>  
      <h3><a href="/uslugi-dlya-biznesa/advokat-po-arbitrazhnym-delam.html">Адвокат по арбитражным делам</a></h3> 
    <a class="law-face__link" href="/uslugi-dlya-biznesa/advokat-po-arbitrazhnym-delam.html">Подробнее<svg class="icon-arrow-right"><use xlink:href="#arrow-right"></use></svg></a> 
    </div> 
  </div> 
  <div class="col-md-4 law-face__item"> 
    <div class="law-face__item-inner"> 
    <button class="law-face__item-toggle">x</button> 
    <svg class="law-face__icon icon-nalog"><use xlink:href="#nalog"></use></svg> 
      <h3><a href="/uslugi-dlya-biznesa/uslugi-yuristov-po-nalogovym-sporam.html">Услуги юристов по налоговым <br>спорам</a></h3> 
      		<div class="moduletable"> 
						<ul class="nav menu law-face__list mod-list"> 
<li class="item-315"><a href="/uslugi-dlya-biznesa/uslugi-yuristov-po-nalogovym-sporam/oformlenie-nalogovykh-vychetov-po-nds.html">Оформление налоговых вычетов по НДС</a></li><li class="item-316"><a href="/uslugi-dlya-biznesa/uslugi-yuristov-po-nalogovym-sporam/soprovozhdenie-pri-kameralnykh-i-vyezdnykh-nalogovykh-proverkakh.html">Сопровождение при камеральных и выездных налоговых проверках</a></li><li class="item-317"><a href="/uslugi-dlya-biznesa/uslugi-yuristov-po-nalogovym-sporam/nalogovoe-planirovanie-i-optimizatsiya-predpriyatiya.html">Налоговое планирование и оптимизация предприятия</a></li><li class="item-318"><a href="/uslugi-dlya-biznesa/uslugi-yuristov-po-nalogovym-sporam/konsultatsii-po-nalogovym-voprosam.html">Консультации по налоговым вопросам  </a></li><li class="item-319"><a href="/uslugi-dlya-biznesa/uslugi-yuristov-po-nalogovym-sporam/advokaty-po-nalogovym-prestupleniyam.html">Адвокаты по налоговым преступлениям</a></li></ul> 
		</div> 
	 
    <a class="law-face__link" href="/uslugi-dlya-biznesa/uslugi-yuristov-po-nalogovym-sporam.html">Подробнее<svg class="icon-arrow-right"><use xlink:href="#arrow-right"></use></svg></a> 
    </div> 
  </div> 
  <div class="col-md-4 law-face__item"> 
    <div class="law-face__item-inner"> 
     <button class="law-face__item-toggle">x</button> 
     <svg class="law-face__icon icon-corp"><use xlink:href="#corp"></use></svg> 
      <h3><a href="/uslugi-dlya-biznesa/yuristy-po-korporativnomu-pravu.html">Юристы по корпоративному праву</a></h3> 
    		<div class="moduletable"> 
						<ul class="nav menu  law-face__list mod-list"> 
<li class="item-320"><a href="/?Itemid=">Профессиональная разработка договоров</a></li><li class="item-321"><a href="/uslugi-dlya-biznesa/yuristy-po-korporativnomu-pravu/razreshenie-korporativnykh-sporov.html">Разрешение корпоративных споров</a></li><li class="item-322"><a href="/uslugi-dlya-biznesa/yuristy-po-korporativnomu-pravu/dosudebnoe-uregulirovanie-sporov.html">Досудебное урегулирование споров</a></li></ul> 
		</div> 
	 
    <a class="law-face__link" href="/uslugi-dlya-biznesa/yuristy-po-korporativnomu-pravu.html">Подробнее<svg class="icon-arrow-right"><use xlink:href="#arrow-right"></use></svg></a> 
    </div> 
  </div> 
  <div class="col-md-4 law-face__item"> 
    <div class="law-face__item-inner"> 
    <button class="law-face__item-toggle"></button> 
    <svg class="law-face__icon icon-reg"><use xlink:href="#reg"></use></svg> 
      <h3><a href="/uslugi-dlya-biznesa/registratsionnye-dejstviya.html">Регистрационные действия</a></h3> 
    		<div class="moduletable"> 
						<ul class="nav menu  law-face__list mod-list"> 
<li class="item-323 deeper parent"><a href="/uslugi-dlya-biznesa/registratsionnye-dejstviya/sozdanie-kommercheskikh-firm.html">Создание коммерческих фирм</a><ul class="nav-child unstyled small"><li class="item-324"><a href="/uslugi-dlya-biznesa/registratsionnye-dejstviya/sozdanie-kommercheskikh-firm/sozdanie-ooo.html">Создание ООО</a></li><li class="item-325"><a href="/uslugi-dlya-biznesa/registratsionnye-dejstviya/sozdanie-kommercheskikh-firm/sozdanie-ao.html">Создание АО</a></li><li class="item-326"><a href="/uslugi-dlya-biznesa/registratsionnye-dejstviya/sozdanie-kommercheskikh-firm/sozdanie-ip.html">Создание ИП </a></li></ul></li><li class="item-327"><a href="/uslugi-dlya-biznesa/registratsionnye-dejstviya/registratsiya-izmenenij.html">Регистрация изменений</a></li><li class="item-328"><a href="/uslugi-dlya-biznesa/registratsionnye-dejstviya/likvidatsiya-yuridicheskogo-litsa.html">Ликвидация юридического лица</a></li><li class="item-329"><a href="/uslugi-dlya-biznesa/registratsionnye-dejstviya/sozdanie-nekommercheskikh-firm.html">Создание некоммерческих фирм</a></li><li class="item-330"><a href="/uslugi-dlya-biznesa/registratsionnye-dejstviya/reorganizatsiya-yuridicheskogo-litsa.html">Реорганизация юридического лица</a></li><li class="item-331"><a href="/uslugi-dlya-biznesa/registratsionnye-dejstviya/otkrytie-raschetnogo-scheta.html">Открытие расчетного счета</a></li></ul> 
		</div> 
	 
    <a class="law-face__link" href="/uslugi-dlya-biznesa/registratsionnye-dejstviya.html">Подробнее<svg class="icon-arrow-right"><use xlink:href="#arrow-right"></use></svg></a> 
    </div> 
  </div> 
  </div> 
</div> 
</section>