JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container container1">
    <p>box1</p>
</div>
<div class="container container2">
    <p>box2</p>
</div>
<div class="container container3">
    <p>box3</p>
</div>
<div class="container container4">
    <p>box4</p>
</div>

CSS

.container{
    background: red;
}

.container2,
.container4{
    text-align: right;
}

JavaScript

function invert(container) {
    var element = $('.container').eq(container-1);
    if (element.css('text-align') == 'right') {
        element.css('text-align', 'left');
    } else {
        element.css('text-align', 'right');
    }
}

invert(2);