jQuery form builder for parsing email array into single input I have the following in script in my web app which contains a lot of duplication. How can I cut down on this duplication and generally improve my code? 

$('a#newAuthority').on("click", function() {
    var $newAuthorityContainer = $(".new-authority-container");

    var $row = $('&lt;div /&gt;', {
        class: 'row'
    }).appendTo($newAuthorityContainer);

    var $large11 = $('&lt;div /&gt;', {
        class: 'large-11 columns'
    }).appendTo($row);

    var $input = $('&lt;input&gt;', {
        type: 'text',
        placeholder: 'email@domain.com',
        class: 'authority-email'
    }).appendTo($large11);

    var $large1 = $('&lt;div /&gt;', {
        class: 'large-1 columns'
    }).appendTo($row);

    var $removeContainer = $('&lt;div /&gt;', {
        class: 'remove-container'
    }).appendTo($large1);

    var $remove = $('&lt;a&gt;', {
        href: '#',
        class: 'remove'
    }).html('&lt;i class="fa fa-fa fa-remove"&gt;&lt;/i&gt;').appendTo(
        $removeContainer);
    return false;
});
$('a#newMember').on("click", function() {
    var $newMemberContainer = $(".new-member-container");

    var $row = $('&lt;div /&gt;', {
        class: 'row'
    }).appendTo($newMemberContainer);

    var $large11 = $('&lt;div /&gt;', {
        class: 'large-11 columns'
    }).appendTo($row);

    var $input = $('&lt;input&gt;', {
        type: 'text',
        placeholder: 'email@domain.com',
        class: 'authority-email'
    }).appendTo($large11);

    var $large1 = $('&lt;div /&gt;', {
        class: 'large-1 columns'
    }).appendTo($row);

    var $removeContainer = $('&lt;div /&gt;', {
        class: 'remove-container'
    }).appendTo($large1);

    var $remove = $('&lt;a&gt;', {
        href: '#',
        class: 'remove'
    }).html('&lt;i class="fa fa-fa fa-remove"&gt;&lt;/i&gt;').appendTo(
        $removeContainer);
    return false;
});

$('input.button').on("click", function() {

    var $authorityInputs = $('.authority-email');

    var authortyEmails = [].map.call($authorityInputs, function(
        $authorityInputs) {
        return $authorityInputs.value;
    }).join(',');

    if ($('body.teamsnew').length) {
        $('input#team_authority_emails').val(authortyEmails);
    }

    if ($('body.teamsedit').length) {
        $('input#team_authority_emails').val('{' + authortyEmails + '}');
    }

    var $memberInputs = $('.member-email');

    var memberEmails = [].map.call($memberInputs, function(
        $memberInputs) {
        return $memberInputs.value;
    }).join(',');

    if ($('body.teamsnew').length) {
        $('input#team_member_emails').val(memberEmails);
    }

    if ($('body.teamsedit').length) {
        $('input#team_member_emails').val('{' + memberEmails + '}');
    }
});

$(document).on('click', '.remove', function() { 
    $(this).closest('.row').remove();
    return false;
});
Extract the code that creates a row to a function, make it return the row created with all the elements inside of it, so that you can use it like this:

var $newAuthorityContainer = $(".new-authority-container");
var $row = createRow().appendTo($newAuthorityContainer);


And then again later:

var $newMemberContainer = $(".new-member-container");
var $row = createRow().appendTo($newMemberContainer);


Alternatively, pass in the container that you want to add the row to, for example:

var $newMemberContainer = $(".new-member-container");
createRow($newMemberContainer);


The function for this latter example:

function createRow($container) {
    var $row = $('&lt;div /&gt;', {
        class: 'row'
    }).appendTo($container);

    var $large11 = $('&lt;div /&gt;', {
        class: 'large-11 columns'
    }).appendTo($row);

    var $input = $('&lt;input&gt;', {
        type: 'text',
        placeholder: 'email@domain.com',
        class: 'authority-email'
    }).appendTo($large11);

    var $large1 = $('&lt;div /&gt;', {
        class: 'large-1 columns'
    }).appendTo($row);

    var $removeContainer = $('&lt;div /&gt;', {
        class: 'remove-container'
    }).appendTo($large1);

    var $remove = $('&lt;a&gt;', {
        href: '#',
        class: 'remove'
    }).html('&lt;i class="fa fa-fa fa-remove"&gt;&lt;/i&gt;').appendTo(
        $removeContainer);
}


I don't see other troubling duplication. 

However, I see a bit troubling typo in the variable name authortyEmails. This could lead to errors, so I suggest to fix that.