JSFiddle - React, Tailwind, and code Playground

HTML

<p class="my_post_num">自分の番号</p><p class="my_ancestor_num">祖先の番号</p>

<div class="alllists">
  <ul>

    <li>
      <div id="post-7" class="list" parent="0" ancestor="">A
            <span class="my_post_num"></span><span class="my_ancestor_num"></span>
      </div>
    </li>

    <li>
      <div id="post-157" class="list" parent="0" ancestor="">B
        <span class="my_post_num"></span><span class="my_ancestor_num"></span>
      </div>
      <ul class="childrens">
        <li>
          <div id="post-200" class="list" parent="157" ancestor="">C(Bの子)
            <span class="my_post_num"></span><span class="my_ancestor_num"></span>
          </div>
        </li>      
        <li>
          <div id="post-354" class="list" parent="157" ancestor="">D(Bの子)
            <span class="my_post_num"></span><span class="my_ancestor_num"></span>
          </div>
        </li>
        <li>
          <div id="post-365" class="list" parent="354" ancestor="">E(Dの子)
            <span class="my_post_num"></span><span class="my_ancestor_num"></span>
          </div>
        </li>         
      </ul>
    </li>

  </ul>
</div>

CSS

li {
  list-style: none;
  margin: 10px 0 10px 0;
}
.my_post_num {
  background: aquamarine;
  padding: 0 5px;
  display: inline-block; 
}
.my_ancestor_num {
  background: pink;
  padding: 0 5px;
  display: inline-block;
}

JavaScript

//先祖番号の連結
function getParentNums(list) {
  var parent_num = list.attr('parent');
  if (parent_num == "0") {
  return ["0"];
  }
  var parent = $("#post-" + parent_num); 
  var parent_nums = getParentNums(parent);
  parent_nums.push(parent_num);
  return parent_nums;
}
$('.list').each(function() {
  var my_post_num = $(this).attr('id').split('-')[1]; 
  var list = $(this);
  var parents = getParentNums(list);
  var my_ancestor_num = parents.join('-');
  list.attr('ancestor',my_ancestor_num);
  //確認のための表示
  $(this).find('.my_post_num').text(my_post_num);
  $(this).find('.my_ancestor_num').text(my_ancestor_num);
});

//子がいたら「ボタン」表示し、「子の数」を書き換える
var parents = [];
$(".list").each(function() {
  var parent_num = $(this).attr('parent'); 
  parents.push( parent_num );
});
$(".list").each(function() {
  $(this).prepend('<p>子の数：<span class="count-box">0</span></p>');
  var my_post_num = $(this).attr('id').split('-')[1];
  var my_child_count = parents.filter(num => num === my_post_num + '').length;
  if (parents.filter(num => num === my_post_num + '')){
    $(this).append('<button>ボタン</button>');
    $(this).find('.count-box').text(my_child_count);    
  }
});