JSFiddle - React, Tailwind, and code Playground

HTML

<div class="divBranch">
  <div class="divBubble">Main</div>
  <div class="divBranch">
    <div class="divBubble">111</div>
    <div class="divBubble">222</div>
    <div class="divBubble">333</div>
    <div class="divBranch">
      <div class="divBubble">333-111</div>
    </div>
    <div class="divBubble">444</div>
    <div class="divBranch">
      <div class="divBubble">444-111</div>
      <div class="divBubble">444-222</div>
      <div class="divBubble">444-333</div>
    </div>
  </div>
</div>

JavaScript

var div, divBranch1, divBranch2;
$('.divBranch').each(function () {
  console.log("divBranch1");
  divBranch1 = $(this);
  divBranch1.children().each(function () { //только дочерние узлы-элементы, т.е. соответствующие тегам

    div = $(this);
    y = div.offset().top;
    x = div.offset().left;
    console.log("x=" + x + ", y=" + y);

    nextDiv = div.next();
    nextDivClass = nextDiv.classList.contains('divBranch'); //Cannot read property 'contains' of undefined

  });
});