JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap" tabIndex="1"></div>
<div class="wrap" tabIndex="1"></div>
<div class="wrap" tabIndex="1"></div>
<div class="wrap" tabIndex="1"></div>
<div class="wrap" tabIndex="1"></div>
<div class="wrap" tabIndex="1"></div>
<div class="wrap" tabIndex="1"></div>
<button id="add">Add</button>

CSS

.wrap {
    min-width: 80px;
    min-height: 110px;
    width: auto;
    border: 1px dotted red;
    float: left;
    padding: 4px;
    clear: right;
    display: block;
}

.page {
    width: 40px;
    height: 55px;
    border: 1px solid blue;
    float: left;
}

#add {
    position: absolute;
    top: 300px;
    left: 0px;
    float: left;
}

JavaScript

$(function() {
    var target = $('.wrap')[0];
    
    $('#add').click(function() {
        $('<div>', {
            'class': 'page'
        }).appendTo(target);
    });
    
    $('.wrap').focusin(function() {
        target = this;
        
        $('.wrap').filter( this ).css('border', '1px solid black').end().not( this ).css('border', '1px dotted red');
    });
});