Untitled

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
      <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons" />-->

      <title>Ilan's Test</title>
   </head>
   <body>

<div class="container">
    <div class="row">
        <div class='col-sm-12' style="margin-top:10px;">
            <div class="form-group">
                <a class="btn btn-primary" id="clickme" style="color:#FFFFFF;">Generate Number</a>
            </div>
            <div id="results">
            </div>
        </div>
    </div>
</div>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
      <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>-->

<script type="text/javascript">
    // Declare our global variables
    var numcheck = new Array(); // this array will hold all generated numbers
    var newnum; // this is our new number placeholder
    var exists; // this is our boolean indicator

    // On button click we run this function
    $('#clickme').click(function(){
            // Assign a new random number to our variable
            newnum = Math.floor(Math.random() * 11) + 1;
            // Itirate through our numcheck array and check if the number exists
            $.each(numcheck, function(i, item) {

                if (item == newnum){
                    // If the number exists, set our indicator to true, exit this loop
                    exists = true;
                    return false;
                } else {
                    // If the number does not exist, set our indicator to true
                    exists = false;
                }
            });

            // Check our indicator what happened when we went through the array, the reason I use indicator is because if I have additional code I need this value in I can use it later
            if (exists == true){
                // If the number exists, indicate in my results log the number has been used
                $('#results').append('<span class="text-danger">' + newnum + ' has already been used.</span><br>');
            } else {
                // If the number does not exist in our array, indicate in the results it's a fresh number and do any custom coding needed in the below clause
                $('#results').append('<span class="text-success">New number generated: ' + newnum + '</span><br>');
            }

            // Add the number to the array regardless if true or false so we can analzye its length in the future if needed, the array is our number inventory which tells us when a number has been previously used
            numcheck.push(newnum);

    });

</script>

   </body>
</html>