JSFiddle - React, Tailwind, and code Playground

by trolleymusic

HTML

<ol class="fields">
<li class="collateral-master">
<select class="collateral">
<optgroup label="Product sheets">
<option value="Analyst's Notebook">Analyst's Notebook</option>
<option value="Analyst's Workstation">Analyst's Workstation</option>
<option value="iBase">iBase</option>
<option value="iBase IntelliShare">iBase IntelliShare</option>
<option value="iBase Plate Analysis">iBase Plate Analysis</option>
<option value="iBridge">iBridge</option>
<option value="iXa Search Service">iXa Search Service</option>
<option value="iXv Visualizer">iXv Visualizer</option>
<option value="TextChart">TextChart</option>
<option value="PatternTracer">PatternTracer</option>
</optgroup>
<optgroup label="Other Literature">
<option value="Corporate Overview Sheet">Corporate Overview Sheet</option>
<option value="IOP Brochure">IOP Brochure</option>
</optgroup>
<optgroup label="i2 Merchandise">
<option value="Lanyards">Lanyards</option>
<option value="Pens">Pens</option>
<option value="A5 Notebooks">A5 Notebooks</option>
<option value="Golf Balls">Golf Balls</option>
</optgroup>
<select>
    
<input type="number" min="0" step="1" value="1" class="quantity">
    
    <button class="remove">x</button>
                    
</li>
    <li><button id="add-more">Add another thing</button></li>
</ol>

CSS

.quantity {
     width: 50px;
     text-align: center;   
}

JavaScript

$(document).ready(function() {
    var m = $('li.collateral-master');
    var o = m.clone();

    var h = $(document.createElement('input'));
    h.attr('type', 'hidden').attr('id', 'collateral');   
    m.append(h);    
    
    m.closest('ol').on('change', 'input, select', function(){
        var a = [];
        m.closest('ol').find('select').each(function() {
            a.push($(this).val() + ': ' + $(this).next('input').val());        
        });
        h.val(a.join(', '));
        console.log(h.val());
    });
    
    $('button.remove').live('click', function() {
        var o = $(this).closest('ol');
        $(this).closest('li').remove();
        $(o.find('input').get(0)).change();
    });
    $('button.remove').on('click', function() {
        var o = $(this).closest('ol');
        $(this).closest('li').remove();
        $(o.find('input').get(0)).change();
    });
    
    $('#add-more').click(function() {
        var x = o.clone();
        $(this).closest('li').before(x);
        x.find('input').change();        
    });  
    
});