JSFiddle - React, Tailwind, and code Playground

by Brunno Romero

HTML

<button id="btn">Dividir Blocos</button>
<div class="bloco">opa</div>
<div class="bloco">opa</div>
<div class="bloco">opa</div>
<div class="bloco">opa</div>

CSS

.marg {
    color: red;
}
.contain {
    border: 1px solid black;
}

JavaScript

function adicionarBlocosContencao() {

    //obtenho todos os elementos com a class .bloco e faço a varredura com each
    $('.bloco').each(function (inx) {

        //Verifico se o elemento já possui um contain
        if (!$(this).parent().hasClass('contain')) {

            //verifico se o numero é par, se for ele cria a div e adiciona a class container
            if (inx % 2 == 0) {
                $('body').append($('<div></div>')
                    .addClass('contain')
                    .append($(this)));
            } else {
                //se não for par só apendo no ultimo .container que não vai estar completo com 2
                $('.contain:last').append($(this));
            }
        }
    });
}

$(document).ready(function () {
    //setando evento de click no botão para chamar função
    $('#btn').click(adicionarBlocosContencao);
});