JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="first-child">first-child</div>
  <div class="middle-child">middle-child</div>
  <div class="middle-child">middle-child</div>
  <div class="last-child">last-child</div>
</div>
<div class="parent">
  <div class="first-child">first-child</div>
  <div class="middle-child">middle-child</div>
  <div class="middle-child">middle-child</div>
  <div class="last-child">last-child</div>
</div>

<div class="parent">
  <div class="first-child">first-child</div>
  <div class="middle-child-1">middle-child</div>
  <div class="middle-child-2">middle-child</div>
  <div class="last-child">last-child</div>
</div>
<div class="parent">
  <div class="first-child">first-child</div>
  <div class="middle-child-1">middle-child</div>
  <div class="middle-child-2">middle-child</div>
  <div class="last-child">last-child</div>
</div>

CSS

.parent {
  margin: 20px;
}
.border-green {
  border: 1px solid green;
}
.border-red {
  border: 1px solid red;
}

JavaScript

$(".parent").each(function(){
  $(this).find('.middle-child').wrapAll("<div class='border-green'></div>");
  
  // или
	$(this).find('.middle-child-1, .middle-child-2').wrapAll("<div class='border-red'></div>");
});