JSFiddle - React, Tailwind, and code Playground

by abdennour

HTML

<div data-id="123">123</div>
    <div data-id="120" data-parent="123">120</div>
    <div data-id="115" data-parent="123">115</div>
    
    
    <div data-id="240">240</div>
    <div data-id="245" data-parent="240">245</div>
    <div data-id="246" data-parent="240">246</div>
    <div data-id="247" data-parent="240">247</div>
    
    
    <div data-id="255" data-parent="245">255</div>
    <div data-id="256" data-parent="245">256</div>


<br/><br/><br/><br/><br/><br/><br/>
<h1>Results: Children of {{240}}</h1>
<span id="results">
    
    
    
</span>

CSS

div{
    border-style: solid;
    border-width: 5px;
    border-color:red;
}

JavaScript

$.fn.treeChildren=function(){
       return $('div[data-parent='+$(this).attr('data-id')+']');
    }
    
    $('#results').html( $('[data-id=240]').treeChildren().clone())