JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label for="year-0">Enter Year</label>
    <input id="year-0" type="number" title="Enter Year"
    />
    <button id="addYear" title="Add Year">Year</button>
</div>

CSS

input {
    width: 50px;
    border: 1px solid #d2d2d2;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1);
    background: #fefefe;
    padding: 2px;
}
input:focus, {
    outline-style: none;
    border: 1px solid #49f;
    background: #fff;
    box-shadow: 0 0 1px 2px rgba(68, 153, 255, .2);
}

button span { font-size: 75%; }

JavaScript

$('#addYear')
        .button({icons: { primary: 'ui-icon-circle-plus' } })
        .on('click', function() { 
            var clone      = $('div').first().clone(true),
                peroid     = $('div').length;
       
            //update ID
            $(clone).find('label').prop('for','year-' + peroid);
            $(clone).find('input').prop('id','year-' + peroid);
            
            $('div:first button')
                .prop('id','')
                .prop('title','Remove Year')
                .addClass('removeYear');
    
            
            $(clone).insertBefore('div:first');
            $('.removeYear:first')
                 .off('click')
                 .button({ icons: { primary: 'ui-icon-circle-minus' } })  
                 .on('click', function() { console.log('remove function');  });
        
        });