JSFiddle - React, Tailwind, and code Playground

by userdude

HTML

<div id="container">
    <div class="add-row">
        <button>Add Test Row</button>
    </div>
    <div class="right-fit-row">
        <div class="super-scroller">
            <div class="horizontal-fit">
                <div class="outer-block">
                    <div class="inner-block"></div>
                </div>
            </div>
        </div>
        <div class="toggles"> 
            <p>
                <label>
                    <input type="checkbox" class="rowremove" value="true"/>
                    Remove?
                </label>
                &nbsp;&nbsp; - &nbsp;&nbsp;
                <label>
                    <input type="checkbox" class="margin" value="true"/>
                    Auto-Margin?
                </label>
            </p>
            <p>
                <input type="text" class="add" value="1"/>
                <button class="add">Add Block</button>
                &nbsp;&nbsp; - &nbsp;&nbsp;
                <input type="text" class="add" value="1"/>
                <button class="remove">Remove Block</button>
            </p>
        </div>
    </div>
</div>

CSS

#container {
    margin: 10px auto;
    padding: 5px 0;
    width: 100%;
    max-width: 800px;
    text-align: center;
}
.right-fit-row {
    background: #ddd;
    border: 1px solid #999;
    margin: 10px 0;
    padding: 10px 0;
}
.super-scroller {
    border: 1px solid green;
    overflow-x: scroll;
    margin: 0 auto 10px;
    padding: 5px;
    width: 90%;
}
.horizontal-fit {
    display: table;
    border: 1px solid blue;
}
.horizontal-fit .outer-block {
    display: table-cell;
}
.horizontal-fit .inner-block {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 5px;
    width: 100px;
    height: 100px;
}
.toggles input {
    width: 20px;
    text-align: center;
}
.auto-margin {
    margin-left: auto;
    margin-right: auto;
}
p {
    margin: 0 0 5px;
}

JavaScript

var $container = $('#container'),
    $addrow = $container.find('.add-row'),
    $options = $container.find('.toggles'),
    $toggles = $options.find('.add, .remove, .margin, .rowremove'),
    $rows = $container.find('.right-fit-row'),
    $supers = $rows.find('.super-scroller'),
    $fitters = $supers.find('.horizontal-fit'),
    $block = $fitters.find('.outer-block:eq(0)').clone(),
    $row
    bgs = ['#cdc','#dcc','#ccd','#efc','#dbe','#bdc'];

var toggle = function(){
    var $this = $(this),
        $fitter = $this.parents('.right-fit-row').find('.horizontal-fit'),
        type = $this.attr('class').replace(/[^(add|remove|margin|rowremove)]/, ''),
        i = parseInt($this.prev('input:text').val()) || 1;
    
    while (i--) {
        switch (type) {
            case 'add':
                $block.clone().appendTo($fitter);
                break;
            case 'remove':
                $fitter.find('.outer-block').last().remove();
                break;
            case 'margin':
                $fitter.toggleClass('auto-margin');
                break;
            case 'rowremove':
                if ($container.find('.right-fit-row').size() > 1) {
                    $this.parents('.right-fit-row').remove();
                    return;
                }
                $this.prop('checked', false);
                break;
        }
    }
};

var addrow = function(){
    bgs.unshift(bgs.pop());
    
    $row.clone(true).css('background', bgs[0]).appendTo($container);
};

$addrow.click(addrow);
$toggles.click(toggle);

$row = $rows.first().clone(true);