Kак добавить addeventlistener к кнопке, которая создается с помощью js?

если же у вас периодические повторяющиеся запросы (например что-то вроде подгрузки контента в зависимости от прокрутки страницы) можно попробовать собирать объекты кнопок в глобальном массиве и навешивать события только на появившиеся при подгрузке:
- создаем пустой массив;
- при успешной обработке запроса вызываем колбэком ф-цию, которая находит все кнопки на странице и проверяет, есть ли уже такие кнопки в нашем глобальном массиве.
- если этой кнопки в массиве нет, навешиваем на нее листенер и добавляем в массив

Kак добавить addeventlistener к кнопке, которая создается с помощью js?

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

Почему может показываться отрицательное значение, если двигать по максимуму слева?

переменные лучше называть так, чтобы по имени было понятно, за что переменная отвечает. В данном случае ее можно было бы назвать как-нибудь вроде starsDataWidth, тогда выражение $(this).next().width(starsDataWidth) станет более читабельным и легким для восприятия

для упрощения реализации второго примера, на вскидку, я бы лучше разделил все поле на отдельные звезды: в большой блок вписываем 5 элементов, в каждый из которых фоном 1 звезду. При наведении мыши на элемент меняем цвет звезды.

Почему может показываться отрицательное значение, если двигать по максимуму слева?

1) подробнее можно почитать например, здесь и здесь - про события, и про координаты здесь
2) границы могут не совпадать для событий и элементов, подробнее неплохо здесь написано

Почему может показываться отрицательное значение, если двигать по максимуму слева?

1) это поправка на тот же скоростной выход: если мы оставим просто проверку на пересечение правой границы как exitPointX > (leftEdge +width) или на выход везде правее левой границы exitPointX > leftEdge, мы можем получить ложное срабатывание при некорректном определении браузером exitPointX. Поэтому добавляем костыль в виде 10% ширины как буферную зону вправо от левой границы.
2) $('#param' + id).text("5"); -> хардкодом вписываем строку "5" (можно было и просто 5 цифрой, не имеет значения, только семантика) вместо того, что у нас рассчитал алгоритм в функции move; $(this).next().width(width); -> это аналог obj.next().width(progress) из вашего кода (функции move, 8-я стр в вашем примере), только теперь мы для элемента, на котором сработало событие (div.stars__data), берем следующего за ним сиблинга (элементы с одинаковым родительским блоком, у нас будет p.stars__progress) и в качестве ширины задаем ему значение из переменной width (объявляли ее как var width = $(this).width(). Т.е. делаем p.stars__progress такой же ширины, как div.stars__data. Имя для переменной выбрал не очень удачно, вводит в заблуждение слишком много width ))

Почему может показываться отрицательное значение, если двигать по максимуму слева?

думаю, его автор ошибается в причинах, т.к. растояние между звездочками не влияет на результат: учитывается расстояние от начала блока (obj.offset().left) и расстояние до положения указателя (pageX), а не размер звезды. Предложенный им вариант, хоть и костыльный (имею в виду + 1.4), но может сработать. А может и не сработать при определенных условиях, например в случае быстрого перемещения курсора по звездам.