JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
<p><a href="#" class="add-product-from-modal">Add a new row</a></p>

<table class="table table-striped m-0 m-t-20">
    <thead>
        <tr>
            <th style="width: 45%">Product</th>
            <th style="width: 10%">Qty</th>
            <th style="width: 25%" colspan="2">Delivery?</th>				                                                
            <th style="width: 10%">Total</th>
            <th style="width: 10%">Margin</th>
        </tr>
    </thead>
    <tbody id="product-list">
        
    </tbody>
</table>

JavaScript

var count = 0;
jQuery(document).on('click', '.add-product-from-modal', function() {        
 
    $('#product-list').append('<tr><td>Product Name</td><td>1</td><td><input name="isDelivery[]" id="'+count+'" class="switchery" value="1" type="checkbox"/></td><td><input name="deliveryDate[] "type="text" style="display: none" class="form-control deliveryDate"></td><td>&pound;1</td><td>TBC</td></tr>');       
    
    var elems = document.getElementById(count);  
    var switchery = new Switchery(elems, {size: 'small'});
  	count++;
    
    return false;

});

jQuery(document).on('click', '.switchery', function() {	
	$(this).parent().parent().find(".deliveryDate").toggle().fadeIn();
});