JSFiddle - React, Tailwind, and code Playground

HTML

<div class="category-faceted">
    <div class="parent-category" data-cat-number="1">
        <a href="javascript:void(0)">Celebrity</a>
        <div class="child-category" parent-cat-number="1">
            <a href="javascript:void(0)">Sub-Celebrity</a>
        </div>
    </div>
    <div class="parent-category" data-cat-number="2">
        <a href="javascript:void(0)">Entertainment</a>
        <div class="child-category" parent-cat-number="2">
            <a href="javascript:void(0)">Sub-Ent</a>
        </div>
    </div>
</div>

CSS

.category-faceted {
  position: relative;
  margin: 70px 0 0 0;  
  width: 200px;
}

.parent-category  a {
    color:black;
  margin:5px 0 0 0;
  font-weight:100;
  line-height:23px;
  height:28px;
  display: block;
  border: 1px solid #000;
  padding:2px 20px;
}

.parent-category  a:hover {
  background: #000;
  color:#FFF;
  -webkit-transition:all 0.250s ease-in-out;
  -moz-transition:all 0.250s ease-in-out;
  -o-transition:all 0.250s ease-in-out;
  transition:all 0.250s ease-in-out;
}

.child-category {
  display: none;
}

.child-category a {
  border:0;
}

JavaScript

$('.parent-category').click(function () {
        var my_cat_number = $(this).attr('data-cat-number');
        $(this).children().find("[parent-cat-number] = my_cat_number").show();

    })