title: Apply selected styles to only one div at a time (without jQuery)
body: <p>Could you please help me. I need to make <code>&lt;span class="badge badge-light"&gt;&lt;i class="fa fa-check-circle"&gt;&lt;/i&gt;&lt;/span&gt;</code> visible (initially it has style "visibility: hidden") when I click on div with the class="role-box". It should work in a following way: when I click on a div with a title "Role-one" the badge for this div will be visible, and if I click on a div with a title "Role-two", the badge for the "Role-one" div will become hidden and the badge for "Role-two" div will be visible. Currently it shows badges for all divs if I click on them. Below is the code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="col-6 col-md-4" *ngFor="let role of joblabels, index as ri"&gt;
      &lt;div class="role-box" id="{{ri}}" (click)="selectRole(ri)"&gt;
          &lt;span class="badge badge-light"&gt;&lt;i class="fa fa-check-circle"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;p class="role-type"&gt;{{ role.title }}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>joblabels = [
  {title: 'Role-one'}, 
  {title: 'Role-two'}, 
  {title: 'Role-three'}];
  
  
  selectRole(id) {
  let badge = document.getElementById(id).childNodes;
  if (badge[1]['style'].visibility === 'visible') {
    badge[1]['style'].visibility = 'hidden';
  }
  else {
    badge[1]['style'].visibility = 'visible';
  } }
  </code></pre>