JSFiddle - React, Tailwind, and code Playground
HTML
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
CSS
.box {
width: 3em; height: 1em; background: orange; margin: 3px;
}
.wrapper {
border: solid 1px red;
padding: 3px;
}
JavaScript
let wrapper = document.createElement('div')
wrapper.className = 'wrapper'
wrapper.appendChild(document.querySelector(`.box:nth-of-type(3)`))
wrapper.appendChild(document.querySelector(`.box:nth-of-type(3)`))
wrapper.appendChild(document.querySelector(`.box:nth-of-type(3)`))
document.querySelector('.box:nth-of-type(2)').after(wrapper)