JSFiddle - React, Tailwind, and code Playground

by xdumaine

HTML

<ul id='List1'>
    <li class='Endless'><input onchange="updatetotal();"/></li>
</ul>
<input id="total"/>
<hr/>
<table id='Table1'>
    <tr>
        <th>header</th>
        <th>cells</th>
    </tr>
    <tr class='Endless'>
        <td>Blah</td>
        <td><input/></td>
    </tr>
</table>

CSS

table { border:1px solid #ddd }
td { border-bottom: solid 1px #aaa }

JavaScript

$(function updatetotal(){
    document.getElementById("total").value += "test";
    
});

$(function(){

    $('#List1,#Table1').each(function(){
        var $this = $(this);
        
        $this.keyup(function(){
            AppendEndlessEmpty($(this));
            
     
        });
    });

});


/// used as a simple counter to generate unique IDs
var baseid = 1;

/// Append an empty set of inputs to the given container

/// Container should be something that can be appended to like a table or ul
/// Within the container should be something tagged 'Endless' like a tr or li. This node
/// will be cloned as necessary.
function AppendEndlessEmpty(container) {
    var LastItem = container.find('.Endless:last');
    var ReturnItem;

    // if the last item is empty, use it
    if (LastItem.find('input[value!=""],textarea[value!=""],select[selectedIndex!=0]').size() == 0) {
        ReturnItem = LastItem;
    }
    // otherwise, create a new one
    else {
        ReturnItem = LastItem
            .clone(true)            // copy with event handlers (e.g. LI)
            .appendTo(container)    // attach to the end of the container (e.g. UL)
            .find('textarea,input,span,select')
            .each(function(i) {
                // fix the ID and Name so things like the datepicker doesn't get messed up
                var NewUniqueID = container.attr('id') + '-' + (++baseid) + '-' + i;
                $(this)
                    .attr('id', NewUniqueID)
                    .attr('name', NewUniqueID)
                    .filter('textarea,input').val('').end() // clear the value
                    .filter('select').each(function() { this.selectedIndex = 0; }).end()
                    .filter('span').text('').end();
            }).end()
            .find('.Endless-hide-on-clone').hide().end();

    }
}