JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/uikit.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/uikit.gradient.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/components/accordion.gradient.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/js/uikit.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/js/components/accordion.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/components/notify.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/components/notify.gradient.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/js/components/notify.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/components/placeholder.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/components/placeholder.gradient.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/components/upload.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/components/upload.gradient.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/js/components/upload.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/components/form-file.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/components/progress.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/components/progress.gradient.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/components/form-file.gradient.min.css">
<div class="uk-container uk-container-center"> 
    <div class="uk-grid">
        <div class="uk-width-1-1">

            <h1>Batch Processing</h1>

           ...

CSS

.uk-form-file {
    display: block;
}

JavaScript

var globalOptions = {
    minSizes: 1,
    maxSizes: 5
};


// Add Row
$(document).on('click', '.add-size-row', function(){

    var rowCount = $('.size-row').length + 1;

    if( rowCount <= globalOptions.maxSizes ) {

        var thisRow = $(this).parents('.size-row');

        if( $('.size-row .uk-button-group').length === 0 ) {
            thisRow.find('.add-size-row').wrap('<div class="uk-button-group"></div>');
        }

        thisRow.clone().insertAfter(thisRow);

        $('.size-row .add-size-row').each(function(){

            if( $('.size-row .remove-size-row').length === 0 ) {
                $('.size-row .add-size-row').after('<button class="remove-size-row uk-button uk-button-danger" type="button"><i class="uk-icon-remove"></i></button>');
            }

        });

    } else {

        UIkit.notify('<i class="uk-icon-warning"></i> You have reached the limit of the number of sizes.', {
            status: 'danger'
        });

    }

});

// Remove Row
$(document).on('click', '.remove-size-row', function(){

    var rowCount = $('.size-row').length - 1;
    var thisRow = $(this).parents('.size-row');

    //console.log(rowCount);

    if( rowCount >= globalOptions.minSizes ) {
        thisRow.remove();
    }

    if( rowCount == globalOptions.minSizes ) {
        $('.size-row').find('.remove-size-row').remove();
        $('.size-row .add-size-row').unwrap();
    }
});

// Sync width and height as suffix
var width = 0, height = 0;

$(document).on('input', '.size-row input[name="width"]', function(event){
    width = $(this).val();

    console.log(width);
});

$(document).on('input', '.size-row input[name="height"]', function(event){
    height = $(this).val();

    console.log(height);
});

$(document).on('input', '.size-row input[name="width"], .size-row input[name="height"]', function(event){
    $(this).parents('.size-row').find('input[name="suffix"]').val('_' + width + 'x' + height);

    console.log(width + 'x' +...