JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column">
<div class="row" id="r1">row 1</div>
<div class="row" id="r2">row 2</div>
<div class="row" id="r3">row 3</div>
</div>
<p style="margin-top: 15px">Test output</p>
<div class="out"></div>

JavaScript

var out = $('.out');
function pout(s) {
    out.append('<p>' + s + '</p>');
}
var col = $('.column');
var r2 = col.children('.row:nth-child(2)');
pout('row 2 start index: ' + r2.index());
r2.before('<div class="row" id="new">added row</div>');
pout('row 2 index after added row: ' + r2.index());
var r2v = col.children('.row:nth-child(' + (r2.index() + 1) + ')');
pout('lookup of row 2 by children(nth-child(index+1)) worked? <b>' + (r2.attr('id') === r2v.attr('id')) + '</b>');
r2v = col.find('.row:nth-child(' + (r2.index() + 1) + ')');
pout('lookup of row 2 by find(nth-child(index+1)) worked? <b>' + (r2.attr('id') === r2v.attr('id')) + '</b>');