JSFiddle - React, Tailwind, and code Playground

Facepile

by Ttt Yyy

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class='more'>
  Content Above
  </div>
  <ul class='facepile' id='my_facepile'>
    <li>
      <a href='#'>
        <img src='#' />
      </a>
    </li>
    <li>
      <a href='#'>
        <img src='#' />
      </a>
    </li>
    <li>
      <a href='#'>
        <img src='#' />
      </a>
    </li>
    <li>
      <a href='#'>
        <img src='#' />
      </a>
    </li>
     <li>
      <a href='#'>
        <img src='#' />
      </a>
    </li>
     <li>
      <a href='#'>
        <img src='#' />
      </a>
    </li>
     <li>
      <a href='#'>
        <img src='#' />
      </a>
    </li>
    <li>
      <a href='#'>
        <img src='#' />
      </a>
    </li>
  </ul>
  <div class='clearfix' />
  <div class='more'>
  Content Below
  </div>
   <div id='console-1' />
  <div id='console-2' />
    <div id='console-3' />
</body>
</html>

CSS

.more {
  background-color: #eee;
  padding: 10px;
}

.facepile {
  display: flex;
  flex-wrap: wrap;
  margin-top: -2px;
  margin-bottom: 0;
  width: 200px;
  list-style: none;
  padding: 0;
}

.facepile li {
  margin: 2px 2px 0 0;
  line-height: 0;
  /* float: left; */
}

/* .clearfix {
  clear: both;
} */

.facepile img {
  height: 30px;
  width: 30px;
}

JavaScript

const facepile = document.getElementById('my_facepile');

/* facepile.addEventListener('click', (e) => {
  let target = e.target;
  while (target.tagName !== 'LI') {
    target = target.parentNode;
  }
  let pointer = target;
document.getElementById('console-1').innerHTML = pointer;
  let index = 0;
  while(pointer.previousSibling) {
  if(pointer.nodeType === 1) {
  index++;
  } else {
  document.getElementById('console-3').innerHTML = pointer;
  }
    
    pointer = pointer.previousSibling;
  }
document.getElementById('console-2').innerHTML = index;
}, false) */

let children = facepile.childNodes;
 /* document.getElementById('console-1').innerHTML = children; */
let index = 0;
for(let i = 0; i < children.length; i++) { // need to do IIFE if use var
 /*  ((index) => {
    children[i].addEventListener('click', () => {
    document.getElementById('console-2').innerHTML = index;
    }, false)
  })(i); */
  if(children[i].tagName === "LI") {
  	index++;
  }
  let currentIndex = index;
  children[i].addEventListener('click', () => {
    /* document.getElementById('console-2').innerHTML = i; */
    document.getElementById('console-2').innerHTML = currentIndex;
    }, false)
}