Javascript-форум - Не используется переменная

Не могу понять как использовать переменные
html, files_path после отработки функции
$('.upload_files').on( 'click', function( event ){
...}
пробую например вывести в консоль console.log($html) внутри
этой функции $(".add2cart").click(function () {...}

выдается ошибка "Uncaught ReferenceError: $html is not defined"

Ниже весь код:

$(window).ready(function () {
	(function($){

var files; // переменная. будет содержать данные файлов

// заполняем переменную данными файлов, при изменении значения file поля
$('input[type=file]').on('change', function(){
	files = this.files;
});


// обработка и отправка AJAX запроса при клике на кнопку upload_files
$('.upload_files').on( 'click', function( event ){

	event.stopPropagation(); // остановка всех текущих JS событий
	event.preventDefault();  // остановка дефолтного события для текущего элемента - клик для <a> тега

	// ничего не делаем если files пустой
	if( typeof files == 'undefined' ) return;

	// создадим данные файлов в подходящем для отправки формате
	var data = new FormData();
	$.each( files, function( key, value ){
		data.append( key, value );
	});

	// добавим переменную идентификатор запроса
	data.append( 'my_file_upload', 1 );

	// AJAX запрос
	$.ajax({
		url         : '/wp-content/themes/basic-pro/submit.php',
		type        : 'POST',
		data        : data,
		cache       : false,
		dataType    : 'json',
		// отключаем обработку передаваемых данных, пусть передаются как есть
		processData : false,
		// отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
		contentType : false,
		// функция успешного ответа сервера
		success     : function( respond, status, jqXHR ){

			// ОК
			if( typeof respond.error === 'undefined' ){
				// файлы загружены, делаем что-нибудь

				// покажем пути к загруженным файлам в блок '.ajax-reply'
				
				var files_path = respond.files;
				var $html = '';
				$.each( files_path, function( key, val ){
					 $html += val +'<br>';
				} )

				$('.ajax-reply').html( $html );
			}
			// error
			else {
				console.log('ОШИБКА: ' + respond.error );
			}
		},
		// функция ошибки ответа сервера
		error: function( jqXHR, status, errorThrown ){
			console.log( 'ОШИБКА AJAX запроса: ' + status, jqXHR );
		}
	});
	$(".add2cart").click(function () {
		description = "";
		if ($("[data-id=" + $(this).data("id") + "]").hasClass("descriptionField")) {
			$(".descriptionField[data-id=" + $(this).data("id") + "]").removeClass("error");
			if ($(".descriptionField[data-id=" + $(this).data("id") + "]").val() < 8) {
				$(".descriptionField[data-id=" + $(this).data("id") + "]").addClass("error");
				return false;
			} else {
				description = $(".descriptionField[data-id=" + $(this).data("id") + "]").val();
				// description = description + " www ";
				console.log($html);
			}
		}
		$('#basket').removeClass('close-basket');
		$('button.add2cart[data-id=' + $(this).data("id") + ']').fadeOut();
		$('p.descriptionField-p[data-id=' + $(this).data("id") + ']').fadeOut();
		$('.descriptionField[data-id=' + $(this).data("id") + ']').fadeOut();
		$('.selectPrice[data-id=' + $(this).data("id") + ']').fadeOut();
		$('button.showFields[data-id=' + $(this).data("id") + ']').fadeIn();
		$('button.showFields[data-id=' + $(this).data("id") + ']').addClass('added');
		$('button.showFields[data-id=' + $(this).data("id") + ']').after('<i></i>');
		$.ajax({
			method: "post",
			url: "/ajax/common.php",
			data: ({
				action: "add2cart",
				name: $(this).data("name"),
				price: ($(".selectPrice[data-id=" + $(this).data("id") + "]").val() > 0 ? $(".selectPrice[data-id=" + $(this).data("id") + "]").val() : $(this).data("price")),
				descr: description
			}),
			success: function () {
				showcart();
				messageShowAddBasket("<p>Услуга добавлена<br><button onclick='showbasketlist(true);'>перейти в корзину</button></p>");
			}
		})
	});

});

	
})(jQuery);

});