I dynamically add some elements to an existing element, but I can't get the Click event to work on the dynamically added elements.
I've worked with similarly scenarios before and using ON has always worked, but not now.

Function:

1. function SetStars(count) {
2.     console.log("SetStars (" + count + ")");
3.     var $stars = $createWrap.find(".score-wrap > .stars");
4.     $stars.empty();
5.     for (let i = 1; i <= 5; i++) {
6.         let $elm = document.createElement("i");
7.         $($elm).addClass("fa-star").addClass("star").addClass("clickable");
8.         $($elm).data("count", i);
9.         if (i <= count) {
10.             $($elm).addClass("fas");
11.         }
12.         else {
13.             $($elm).addClass("far");
14.         }
15.         $stars.append($elm);
16.     }
17. }

Event listener:

1.  $($createWrap).find(".star.clickable").on("click", function () {
2.     console.log("click");
3.     var count = parseInt($(this).data("count"));
4.     SetStars(count);
5. });

----------