JSFiddle - React, Tailwind, and code Playground

by mendesjuan

HTML

<fieldset>
                <legend>Send Email</legend>
                <label>Emails(s) to send notice to.</label>
                <p>
                    <input type="email" name="emails[]" style="cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;"><span class="btn_orange"><a href="#" class="remove_field">x</a></span>
                </p>
                <p><input type="email" name="emails[]"><span class="btn_orange"><a href="#" class="remove_field">x</a></span></p><p><input type="email" name="emails[]"><span class="btn_orange"><a href="#" class="remove_field">x</a></span></p><p>
                    <span class="btn_orange"><a class="add_email_button" href="#">Add Another Email</a></span>
                </p>
                <p>
                    <span class="btn_orange"><a class="ui-button">Send Email</a></span>
                </p>
            </fieldset>

JavaScript

$("#importbutton").click(function () {
                $("#ProgressBarImg").show();
                $.get('@Url.Action("Import", "Import")', {},
                function (data) {
                    $('body').html(data);
                    $('#ProgressBarImg').hide();
                });
                $("#importbutton").removeAttr("href");
            }
            );


            $('#emailButton').click(function () {
                $(dialog).dialog("open");
                $('#emailButton').removeAttr('href');
            });
            $('.add_email_button').closest('p').click(function () {
                var html = '<p><input type="email" name="emails[]" /><span class="btn_orange"><a href="#" class="remove_field">x</a></span></p>';
                $(html).insertBefore($(this));
            });

            $(document).on('click', 'a.remove_field', function () {
                $(this).closest('p').remove();
            });