JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<form id="foobar">
	<div id="foobar-X">foobar-X</div>
	<div id="foobar-Y"><span>foo</span><span>bar</span><span>Y</span></div>
  <p id="foobar-Z">foobar-Z</p>
</form>

CSS

form {background:#eee;padding:1rem;}
form * {margin:1rem;background:#aaa;padding:.5rem;}

JavaScript

$( "form" ).click(function ( e ) {
   
  var kids = $( e.target ).children();
  var len = kids.length;
 
  //$( "#results span:first" ).text( len );
  //$( "#results span:last" ).text( e.target.tagName );
	alert($(this).attr('id'));
  alert(len);
  alert(e.target.tagName);
 
  e.preventDefault();
});