Ди Ма

setTimeout(() => {}, 0); вызовет функцию через 0 ms. Хоть тут и ноль, на самом деле этого хватает, что бы дождаться выполнения остального кода. Не очень надежный метод.

Если я правильно понял:

3) Вешаю событие mousedown на body и создаю поле с textarea при клике.
4) Слушаю событие и определяю где был клик и если это поле textarea ставлю focus()

Нужно создавать textarea только в том случае, если event.target НЕ textarea.
А если textarea, то ничего не делать.
А у вас получается, что если это textarea, то вы принудительно переносите фокус.

На python есть "Selenium"
Примерно так выглядит код:

browser = webdriver.Firefox()
browser.get("http://foo.ru") # открываем страницу

balans = browser.find_element_by_id("balans") # находим баланс
btn = browser.find_element_by_id("btn") # находим кнопку

btn.click() # кликаем

Можно задать объектам свойства "масса" и "скорость".
Функция, выполняющая анимацию должна высчитывать высоту прыжка исходя из скорости и массы. А функция, заставляющая объект прыгать- должна добавлять объекту скорости.

jsfiddle.net/j9judf02/

<div class="radio_wrap">
	<label>English</label>
	<input type="radio" name="lang" value="en">

	<label>Русский</label>
	<input type="radio" name="lang" value="ru">
</div>

<div id="info"></div>

var data = {
	en: {
		title: 'my page',
		message: 'hello world',
	},
	ru: {
		title: 'моя страница',
		message: 'привет мир',
	},
};

// При изменении выбранного input (внутри блока .radio_wrap)
$('.radio_wrap').on('change', 'input', function () {

	// this - выбранный input, и его атрибут value содержит данные, 
	// которые определяют, из какого объекта берем контент
	var title = data[this.value].title;
	var message = data[this.value].message;

	// выводим
	$('#info').html('title: ' + title + '<br>message' + message);
	
	console.log(this);
});

В одном из проектов была схожая задача.
Цена на услугу определялась так-же временем суток. На странице заказа должно было быть вот так:



Заполнять руками все времена для нескольких квестов на месяц вперед- АД!
Более менее удобным оказалось вот так:



Кликаем на нужные времена, выбираем ценовую группу, и добавляется новый блок (несколько времен или в вашем случае мест в зале, группируются по цене).
Этот же интерфейс может показывать свободные и занятые места. И оформлять "заказ" по клику на приглядевшееся место.

Я бы сделал несколько групп мест. У каждой группы свой набор параметров.
"Карту" мест хранил бы как матрицу с номерами групп.

// 1 - дорогие места,  2 - норм, 3 - ничего не видно
var area = [
     [2, 1, 1, 2],
  [3, 2, 1, 1, 2, 3],
     [3, 2, 2, 3],
];
// теперь нам известно, какое место, какой ряд, сколько стоит.

При оформлении заказа можно нужный элемент матрицы заменять на id заказа.
Тогда очень легко будет вывести только свободные места, только свободные конкретной группы, только 3 свободных подряд, короче любые варианты. А если место занято, то тут-же можно получить данные заказа по id.

Каждое выполнение функции хранит все переменные в специальном объекте с кодовым именем [[scope]], который нельзя получить в явном виде, но он есть .
Каждый вызов var... - всего лишь создает новое свойство этого объекта, а любое упоминание переменной - первым делом ищется в свойствах этого объекта.

Что-то у вас пошло не так..
А для доступа к свойствам прототипов используйте:

// Чтение. Возвращает obj.__proto__ 
Object.getPrototypeOf(obj);  

// Запись. Устанавливает obj.__proto__ = proto 
Object.setPrototypeOf(obj, proto);

В javaScript есть набор функций для работы с Canvas.
Canvas_API

Например:

<canvas id="canvas"></canvas>

// получить DOM элемент "canvas"
var canvas = document.getElementById("canvas");

// объект, через который управляем изображением
// у него есть набор свойств и методов
var ctx = canvas.getContext("2d");

// цвет заливки
ctx.fillStyle = "green";

// нарисовать прямоугольник от координаты (x10, y10)
// шириной 150, и высотой 100
ctx.fillRect(10, 10, 150, 100);

Та-дааам


А ВОТ одна из многочисленных библиотек, которая помогает работать с Canvas на более высоком уровне.
Например, можно нарисовать картинку в Иллюстраторе или Корале, экспортировать ее в svg, и импортировать в javaScript, откуда можно получить и изменить любой элемент изображения, обрабатывать события (клик, ховер, ...), анимировать элементы.

// UPD

Если посмотреть на код svg изображения, то можно увидеть xml документ, в котором элементы изображения представлены в виде тегов, и некоторые свойства в виде "таблицы стилей"

...
<style type="text/css">
  <![CDATA[
    .fil0 {fill:#8A2628}
    .fil1 {fill:#AC3A39}
  ]]>
</style>
...
<g id="001">
  <polygon class="fil0" points="24,89 52,89 54,91 52,93 24,93 "/>
  <polygon class="fil1" points="28,86 30,86 30,96 28,96 "/>
  <polygon class="fil1" points="31,86 33,86 33,96 31,96 "/>
</g>

А points="24,89 52,89 54,91 52,93 24,93 " - это координаты на плоскости. По ним будет проведена кривая, и заливка будет окрашена в #AC3A39 цвет.
Так что помимо javaScript, некоторыми свойствами можно управлять через css. А svg - это файл разметки, по которому можно нарисовать canvas

getElementsByClassName возвращает коллекцию, а не один элемент

var songName = performer[0].innerHTML + "-" + title[0].innerHTML;

// превращаем json в объект
var obj = JSON.parse(json);

// создаем форму
var form = document.createElement('form');

// а далее по обстоятельствам.
// если количество инпутов соответствует числу элементов массива excluded,
// то в цикле перебираем массив, и добавляем элементы
for (var i = 0; i < obj.excluded.length; i++) {
    var input = document.createElement('input');

    // добавляем атрибуты 
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', 'excluded[' + obj.excluded[i] + ']' );
    // ...
    // и добавляем на страницу
    form.appentChild(input);
}

element.appentChild(form);

// при выборе чего-нибудь
document.getElementById('select_game').addEventListener('change', function (e) {
    console.log(this.value); // value выбранного option
    console.log(this.selectedOptions[0].innerHTML); // текст выбранного option 
});

https://jsfiddle.net/v2cLaoer/

var div = document.getElementById('div');

// Наблюдатель за изменениями DOM элемента
var MutationObserver = (function () {
	var pref = ['WebKit', 'Moz', 'O', 'Ms', ''];

	for (var i=0; i < pref.length; i++) {
		if (pref[i] + 'MutationObserver' in window) {
			return window[pref[i] + 'MutationObserver'];
		}
	}
	return false;
}());

new MutationObserver( function (mutations) {
	mutations.forEach( function (e, i) {

		console.log('измененo'); // что сделать при изменении
		console.log(e);
	});

}).observe(div, { attributes: true });

div.dataset.ololo = true; // изменяем элемент, и смотрим консоль

// UPD
Если нужно именно событие, то создаем CustomEvent, и dispatch-им его внутри наблюдателя.

// может быть любым элементом (не только инпутом)
$('[data-price]').on('click', function () {

	// значение атрибута data-price кликнутого элемента
	var price = this.dataset.price;

	// "подняться" на 2 уровня по DOM
	// найти внутри элемент с классом .price
	// и заменить его текст на полученное значение
	$(this).parent().parent().find('.price').text(price);
});