Edit in JSFiddle

 function isInArray(value, array) {
    return array.indexOf(value) > -1;
  }

  for (var i=1;i<50;i++)  { 
    $('.sQuares').append("<div class='sQuare' id='"+[i] +"'>" +[i] + "</div>");
    }

  var arr = new Array();
    $('.sQuare').each(function(){
      
      $(this).on("click", function(){
          var current = $(this).attr('id');
          $(this).toggleClass("clicked");
         
           console.log($('.clicked').length);

          if( $('.clicked').length > 7){

             console.log("too much");
             $(this).toggleClass("clicked");
             console.log(arr, arr.length);

        } else {
            if(isInArray(current, arr) ) {

              var index = arr.indexOf(current);
              if (index > -1) {
                arr.splice(index, 1);
            }
            console.log("removing from array: " );
        } else {
          arr.push( current);
        }
        }
      });
    });

  
  $('.submit').on("click",function(){
             if(arr.length > 6 ){
                alert(arr);
               }
        });
  $('.clear').on("click", function(){
      $('.clicked').removeClass("clicked");
      arr = [];
  });

 <div role="main" class="htmlContainer">
    <button type="submit" class="submit btn">Submit</button>
     <button type="clear" class="clear btn">clear</button>
<div class="sQuares"></div>



  </div>

.sQuares {
  width: 100%;
}
.sQuare {
  float:left;
  width: 13.0%;
  height: 13.0%;
  text-align: center;
  vertical-align: middle;
  line-height: 90px; 
  border: 1px solid black;
}



.clicked {
  background: red;
}