JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result"></div>

JavaScript

function happyChecker(n) {
     var arr = [];
     var newNum = 0;
     //here I split a number into a string then into an array of strings//
     num = n.toString().split("");
     for (var i = 0; i < num.length; i++) {
         arr[i] = parseInt(num[i], 10);
     }
     //here I square each number then add it to newNum//
     for (var i = 0; i < arr.length; i++) {
         newNum += Math.pow(arr[i], 2);
     }
     //here I noticed that all unhappy numbers eventually came into one of these three//
     //( and more) numbers, so I chose them to shorten the checking. A temporary solution for sure//       
     if (newNum === 58 || newNum === 4 || newNum == 37) {
         return false;
     }

     if (newNum === 1) {

         return true;
     } else {
         return happyChecker(newNum);
     }

 }

function disHappy(num) {
     for (j = num; j > 0; j--) {
         if (happyChecker(j)) {
             $("#result").append(j + " is a Happy Number. It's so happy!!!.<br/>");
         }
     }
}

disHappy(20);