HTML/CSS - Challenge : Odious Numbers Online Editor and JavaScript Compiler

html

<!--
 ⚠️Challenge: how many odious numbers smaller than 10.000 can you find⚠️
odious numbers are non-negative numbers that have an odd number of ones in the binary expansion
# 21 = 10101 = 3
# 50 = 110010 = 3
Challenge: how many odious numbers smaller than 10.000 can you find?
      
      
      by christof becu
-->
<!DOCTYPE html>
<html>
<head>
  <title> Challenge -- Odious Numbers. </title>                                                                          
  <meta charset="utf-8" />
  <style>
  </style>
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>         
</head>
<body>
  <div id="container">
  <div id="intro">
   Challenge : Odious Numbers
  </div>
  <p id="please"> Description: <br> 

css

body {
  font-family:sans-serif;
  }
  #intro {
  border: 1px solid  lightgray;
  border-radius:5px;
  font-weight:bold;
  color: darkgreen; 
  background-color:  #bbeedd;
  text-align:center;
  margin:10px;
  }
  #container {
  border:1px solid  lightgray;
  border-radius:5px;
  width:100% ;
  }
  p  {
  border:1px solid  lightgray;
  border-radius:5px;
  text-indent:6px;
  font-weight:bold;
  color: darkgreen;
  margin:5px;
  text-align:center;
  background-color: #bbeecc;
  }

$(document).ready(function() {  
    
    var i = 0;
    var max = 10000;
    var a;
    var b = $("#output");
    var counter = 1;
    var l;
    var arr = [];
    var arr2 = [];
    var x = 1;
    var total = 0;
    var elem;
    for(var i=1; i<max; i++) {
      arr.push(i);    
    }
   //   console.log("arr.length = "+  arr.length);
    $("#butt").on("click", function() {
         $("#butt").off("click");
         b.append("<div class='wait' > Printing all " + (max/2) +" Odious Numbers...</div>")
        alert("Please wait while it loads");
         i = 0;
      while( i < arr.length )  {
         a = arr[i].toString(2);
         l = a.match(/1/g).length;
         if(l%2 !== 0) {

BROWSER

Console