JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sub-category">
    <div id="sub-category1"></div>
    <div id="sub-category2"></div>
    <div id="sub-category3"></div>
</div>

CSS

#sub-category {
    border:solid 0px black;
    width:686px;
    height:275px;
    position: relative;
    margin:5px;
}
#sub-category1 {
    border:solid 1px black;
    width:223px;
    height:293px;
    position: relative;
    float:left;
    background-color:grey;
}
#sub-category2 {
    border:solid 1px black;
    width:223px;
    height:293px;
    position: relative;
    margin-left: 5px;
    float:left;
    background-color:lightskyblue;
}
#sub-category3 {
    border:solid 1px black;
    width:222px;
    height:293px;
    position: relative;
    float:right;
    background-color:lightgreen;
}

JavaScript 1.7

'use strict';

$(document).ready(function($) {
    setInterval(function() {
        $('#sub-category3').remove();
        
        $('#sub-category1').attr('id', 'sub-category2');
        $('#sub-category2').attr('id', 'sub-category3');
        
        $('#sub-category').prepend('<div id="sub-category1"></div>');
    }, 2000);
});