JSFiddle - React, Tailwind, and code Playground

HTML

<div class="poopshits">
    <div class="wrapthis1"></div>
    <div class="wrapthis2"></div>
    <div class="dontwrapthisguy"></div>
</div>

<!--

essentially i want it to look like this:
<div class="poopshits">
    <div id="wrapper">
        <div class="wrapthis1"></div>
        <div class="wrapthis2"></div>        
    </div>
    <div class="dontwrapthisguy"></div>
</div>

-->

CSS

div {
    border:1px solid blue;
    width:100px;
    height:100px;
}

.poopshits {
    border:3px dashed red;
    width:auto;
    height:auto;
}

#wrapper {
    border:2px solid yellow;
}

JavaScript

$('.poopshits').wrapInner('<div id="wrapper"></div>');
$('#wrapper div:eq(2)').insertAfter('#wrapper');