JSFiddle - React, Tailwind, and code Playground

HTML

<div id='divOne' data-x='1' class='divGroup'>
    <input id='inpOne' value='Click here to find closest div with data-x attribute'/>
    <textarea id='txaOne'>
        This has an ancestor bearing the data-x attribute.
    </textarea>
</div>

<div id='divTwo' class='divGroup'>
    <input id='inpTwo' value='Click here to find closest div with data-x attribute'/>
    <textarea id='txaTwo'>
        No such acestor here
    </textarea>
</div>

<input id='inpThree' value='Not in a div at all'/>
<div id='divOut'></div>

CSS

input{display:block;width:90%}
textarea{width:90%}
#divOut
{border:1px solid red;background:#7f7f7f;border-radius:7px;min-height:1em;}
.divGroup
{
    border:1px solid blue;
    border-radius:10px;
    padding:5px;
    margin-bottom:5px;
    
}

JavaScript

$('input').bind('click',inInput);

function inInput(e)
{
  var tgt = $(e.target);
  var closest = tgt.closest($('div[data-x]'));
    $('#divOut').html('Found:' + closest.length);  
}