function addItem (containerId = 'collection') {
    const collectionContainer = $('#' + containerId);
    const i = collectionContainer.children().length;
    const newItem = $('#itemModel').clone();

    newItem.attr('id', 'item' + i.toString());
    newItem.find('*').addBack().each(function () {
        $.each(this.attributes, function () {
            if (this.specified && typeof this.value === 'string') {
                this.value = this.value.replace(/%i%/g, i.toString());
            }
        })
    })

    newItem.find('input').each((key, element) => {
        if ($(element).attr('data-date') === "1") {
            $(element).addClass('datepicker');
        }
    })

    newItem.removeClass('d-none');
    collectionContainer.append(newItem);

    $('.removeItem').on('click', (event) => { removeItem(event, containerId) });
}

function removeItem (event, containerId = 'collection') {
    const i = $(event.currentTarget).attr('data-index');

    $('#' + containerId).find('#item' + i).remove();
}