JSFiddle - React, Tailwind, and code Playground

by tapas_23571113

HTML

<table cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td style="text-align: right;">
                                    Files:
                                </td>
                                <td style="text-align: left;">
                                    <table id="multiUpload" cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
                                        <tr>
                                            <td style="text-align: center;">
                                                <input type="file" name="file"/>
                                            </td>
                                            <td>
                                                <a href="#" name="add">Add</a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            
                        </table>

JavaScript

$(function() {
                        onUploadReady();
                    });

var onUploadReady = function () {
    $('a[name=add]').on('click', function (event) {
        event.stopPropagation();
        $('table#multiUpload').append('<tr><td style=\"text-align: center;\"><input type=\"file\" name=\"file\"/></td><td><a href="#" name="remove">Remove</a></td></tr>');
        return false;
    });

    $('a[name=remove]').on('click', function (event) {
        event.stopPropagation();
        $(this).parents('tr').eq(0).remove();
        return false;
    });
}