JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div class="output">
    Click me
  </div>
  <div id="scroll1" class="scrollContent">
    <img src="//i.imgur.com/SeVko17.png" height="190" class="test">
    <img src="//i.imgur.com/vKP3TRO.png" height="190" />
    <img src="//i.imgur.com/mp4OQxw.png" height="90" width="90">
    <img src="//i.imgur.com/tajHpZB.png" height="190">
  </div>
  <div id="scroll2" class="scrollContent" sync-scroll="scroll1">
    <img src="//i.imgur.com/L24JNPe.png" height="190">
    <img src="//i.imgur.com/YvKiPER.png" height="190" />
    <img src="https://placekitten.com/200/200/" height="190">
  </div>
</div>

JavaScript

const fullDomPath = function(element) {
  let path = [element.tagName.toLowerCase()];
  element = element.parentElement;
  while (element) {
    path.unshift(element.tagName.toLowerCase());
    element = element.parentElement;
  }
  return path.join(' > ');
};

const simplify = function(element) {
  return {
    name: element.tagName.toLowerCase(),
    attributes: Array.from(element.attributes).map((i) => ({[i.nodeName]: i.nodeValue})),
    path: fullDomPath(element)
  };
};

document.body.addEventListener("click", function(event) {
  let info = {
    event: {
      clientX: event.clientX,
      clientY: event.clientY
    },
    element: simplify(event.target)
  };
  document.querySelector('.output').innerHTML = JSON.stringify(info);
}, false);