JSFiddle - React, Tailwind, and code Playground

by blunderboy

HTML

<div id="check1">
        <p>  
            <span> 
                <b> Bold Line 1 </b>
                <b> This is line2 </b>
            </span>
        </p>
        <p> Should have index 1 </p>
</div>

<br><hr><br>
<div id="check2">
        <p>  
            <span> 
                <b> Bold Line 1 </b>
                <p> This is line2 </p>
            </span>
        </p>
        <p> Should have index 1 </p>
    </div>

<hr>
<div id="check3">
  <p>  
    <span> 
      <b> Bold Line 1 </b>
    </span>
  </p>
  <p> This is line2 </p>
  <p> Should have index 2 </p>
</div>

JavaScript

$(document).ready(function() {
            document.onmousedown = mouseDown;
            function mouseDown(e) {
                var element =  document.elementFromPoint(e.clientX,e.clientY);
                alert("Clicked element is:" + element.tagName + " Parent:" + $(element).parent().get(0).tagName + " Index: " + $(element).index());
            }
        });