JSFiddle - React, Tailwind, and code Playground

by jacobdubail

HTML

<table>
    <tbody>
        
    <tr data-dir=in class='form-field'>
                <th scope='row'> <label>Slide In FX:</label> </th>
                <td> 
                    <label for='' data-el=element>Element</label>
                    <input id='_jtd_anything_slides_in_fx[0][element]' class='code' type='text' name='_jtd_anything_slides_in_fx[0][element]' value='Element' /> 
                </td>
                <td>
                    <label for='' data-el=property>Property</label> 
                    <input id='_jtd_anything_slides_in_fx[0][property]' class='code' type='text' name='_jtd_anything_slides_in_fx[0][property]' value='Property' /> 
                </td>
                <td> 
                    <label for='' data-el=time>Duration (ms)</label>
                    <input id='_jtd_anything_slides_in_fx[0][time]' class='code' type='text' name='_jtd_anything_slides_in_fx[0][time]' value='Time' /> 
                </td>
                <td> 
                    <label for='' data-el=easing>Easing</label>
                    <input id='_jtd_anything_slides_in_fx[0][easing]' class='code' type='text' name='_jtd_anything_slides_in_fx[0][easing]' value='Easing' /> 
                </td>
                <td> <a class='jtd_add_row' data-dir=in href='#' title='Add new row'>add row +</a> </td>
            </tr>
        
            <tr data-dir=out class='form-field'>
                <th scope='row'> <label>Slide Out FX:</label> </th>
                <td> 
                    <label for='' data-el=element>Element</label>
                    <input id='_jtd_anything_slides_out_fx[0][element]' class='code' type='text' name='_jtd_anything_slides_out_fx[0][element]' value='Element' /> 
                </td>
                <td>
                    <label for='' data-el=property>Property</label> 
                    <input id='_jtd_anything_slides_out_fx[0][property]' class='code' type='text' name='_jtd_anything_slides_out_fx[0][property]' value='Property' />...

CSS

td, th { padding: 10px 0; border-top: 1px solid #f1f1f1; }
th     { width: 100px; }

JavaScript

$(function() {
$("table").delegate('.jtd_add_row', 'click', function() {
    
        var $this = $(this),
            dir   = $this.data('dir'),
            par   = $this.parents('tr'),
            count = par.siblings( $(this).data('dir', dir) ).length,
            clone = par.clone(),
            label = clone.find('label[for]'),
            input = clone.find('input');
            

    input.each(function() {
            var $this = $(this),
                data  = $this.prev().data('el');
                      
        $this
            .prev()
            .prop( 'for', '_jtd_anything_slides_'+ dir +'_fx[' + count + '][' + data + ']' );
                
        $this
            .prop( 'id',  '_jtd_anything_slides_'+ dir +'_fx[' + count + '][' + data + ']' )
            .prop( 'name', '_jtd_anything_slides_'+ dir +'_fx[' + count + '][' + data + ']' )
            .val('');
            
    });
        
        
        clone.insertAfter(par);
        
        return false;
    
    });
});