(function ($) {
	$.fn.appender = function (settings) {
		let appendArea = this;
		let rowHtml = $(settings.rowSection)[0].outerHTML;

		settings.hideSection ? $(settings.rowSection).remove() : "";

		let rowCounter = 1;

		if (settings.rowNumberStart) {
			rowCounter = Number(settings.rowNumberStart);
		}

		$(document).on('click', settings.addBtn, function (event) {
			$(appendArea).append(rowHtml);

			if (settings.appendEffect === 'fade') {
				$(settings.rowSection).last().hide().fadeIn();
			} else if (settings.appendEffect === 'slide') {
				$(settings.rowSection).last().hide().slideDown(200);
			}

			$(settings.rowSection).last().addClass(settings.addClass);

			$(settings.rowNumber).last().text(rowCounter);

			type = (settings.type) ? settings.type : settings.rowSection;
			
			$(type).each(function(rowIndex) {
				$(this).find('input[name]').each(function() {
					var name = $(this).attr('name');
					name = name.replace(/\[[0-9]?\]/g, '['+rowIndex+']');
					$(this).attr('name',name);
				});
				$(this).find('select[name]').each(function() {
					var name = $(this).attr('name');
					name = name.replace(/\[[0-9]?\]/g, '['+rowIndex+']');
					$(this).attr('name',name);
				});
				$(this).find('textarea[name]').each(function() {
					var name = $(this).attr('name');
					name = name.replace(/\[[0-9]?\]/g, '['+rowIndex+']');
					$(this).attr('name',name);
				});
				$(this).find('.appender').each(function() {
					$(this).data('id',rowIndex);
				});
			});

			rowCounter++;

			if (settings.callback) {
				settings.callback();
			}

		});


		if (settings.deleteBtn) {
			$(document).on('click', settings.deleteBtn, function (e) {
				$(e.target).closest(settings.rowSection).remove();
				if (settings.callback) {
					settings.callback();
				}
			})
		}
	};

}(jQuery));