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

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?