JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent-container">

    <div  id='child1' class="child">I am child 1 - static</div>
    <div  id='child2' class="child">I am child 2 - static</div>

</div>
<br/>
<div id="result"></div>

JavaScript

$(document).ready(function() {
    
    var result = $('#result');
    
    var children = $(".child");

    // Setting .data() will apply it to ALL .child elements:
    children.data("newData", "Data for .child elements");
    
    result.append("<br/>Before dom manipulation on .child -> " + children.data("newData"));
    result.append("<br/>Before dom manipulation on #child1 <i>(currently the same as .child)</i> -> " + $('#child1').data("newData"));
    result.append("<br/>Before dom manipulation on #child2 -> " + $('#child2').data("newData"));
    
    var dynamicChildDiv = $("<div id='child3' class='child'>I am child 3 - dynamic</div>");
    
    $(".child:first").before(dynamicChildDiv);
    
    // Redeclaring .child gets the new list, calling .data() will get the data from the FIRST element only:   
    var children = $(".child");
    
    result.append("<br/>Before dom manipulation on .child <i>(now the newest element)</i> -> <b>" + children.data("newData"));
    result.append("</b><br/>Before dom manipulation on #child1 -> " + $('#child1').data("newData"));
    result.append("<br/>Before dom manipulation on #child2 -> " + $('#child2').data("newData"));

});