jquery ui resizable with .each() works only on first child

Question

This is the initial html which has 'n' no. of child elements with same class name.

<div class="reading-content">
    <div class="c-resourceitem-content">
        <div data-id="1" class="resource"></div>
        <div class="btn" id="btn"></div>
    </div>
    <div class="c-resourceitem-content">
        <div data-id="2" class="resource"></div>
        <div class="btn" id="btn"></div>
    </div>
    <div class="c-resourceitem-content">
       <div data-id="3" class="resource"></div>
       <div class="btn" id="btn"></div>
    </div></div>`

Javascript: Appending a div as a handler which resizes the element vertically

   $('.reading-content').children('.c-resourceitem-content').each(function eachFn() {
        $(this).children().wrapAll("<div class='resourceitem-content-wrap'></div>");
        var id = $(this).children("resource").attr('id');
        ResourceSplitter =  $('<label class="resource-splitter ">'+'</label>').attr("id", "id_" + id);
        $( ResourceSplitter).appendTo($(this));
        $(this).resizable({        
            handles: {   's' : '.resource-splitter' }
        });       
    });

The final html snippet looks like this by wrapping all child div and appending a handler for resizing as per need .

<div class="reading-content">
    <div class="c-resourceitem-content">
        <div class="resourceitem-content-wrap">
            <div data-id="1" class="resource"></div>
            <div class="btn" id="btn"></div>
        </div>
        <label class="resource-splitter" id="id_1"></label>
    </div>
</div>

But the problem is that resizing happens only for the first child element with the class 'c-resourceitem-content' inside the .each() function.

Please do help me out with a solution so that all the child classes are resizable by using the handler appended to each div.

CSS:

 .resourceitem-content-wrap{
    overflow-y:auto;
    overflow-x: hidden;
    width:100%;
    height:100%;
  }
 .resource-splitter{
    background:#ccc;
    height:5px;
    border-left:none;
    display:block;
    flex: 0 0 auto;
    cursor: row-resize;
    z-index: 80;
 }
 .reading-content {
    height:auto;
    margin-top: 15px;
    margin-right: 15px;
 }

Answer 1

Noticed with the code provided the id applied to the resource-splitter is undefined. Using the index value on the .each function will remove the need for this code:

var id = $(this).children("resource").attr('id');

The index will enumerate over each c-resourceitem-content, I've added an id variable that starts from 1. Like below:

$(".reading-content")
    .children(".c-resourceitem-content")
    .each(function eachFn(index) {
      let id = index + 1;
      $(this)
        .children()
        .wrapAll("<div class='resourceitem-content-wrap'></div>");
      ResourceSplitter = $(
        '<label class="resource-splitter ">' + "</label>"
      ).attr("id", "id_" + id);
      $(ResourceSplitter).appendTo($(this));
      $(this).resizable({
        handles: { 's': ".resource-splitter" }
      });
    });

Are you able to provide the styling applied to the html so I can test it further?