JSFiddle - React, Tailwind, and code Playground

by kairavthakar2016

HTML

<div role="list" class="skill-items">
  <div role="listitem" class="skill-item">
    <div class="skill-category">Accents</div>
    <div>Australian</div>
  </div>
  <div role="listitem" class="skill-item">
    <div class="skill-category">Accents</div>
    <div>English (RP)</div>
  </div>
  <div role="listitem" class="skill-item">
    <div class="skill-category">Accents</div>
    <div>English (RP)</div>
  </div>
  <div role="listitem" class="skill-item">
    <div class="skill-category">Dance</div>
    <div>Hip Hop</div>
  </div>
  <div role="listitem" class="skill-item">
    <div class="skill-category">Dance</div>
    <div>Jaz</div>
  </div>
</div>

CSS

.skill-item div:last-child{padding-left: 10px;}

JavaScript

const category = [...document.querySelectorAll('.skill-item > .skill-category')];
const texts = new Set(category.map(x => x.innerHTML));
category.forEach(category => {
  if(texts.has(category.innerHTML)){
    texts.delete(category.innerHTML);
  }
  else{
    category.remove()
  }
})