How to highlight the second time reference in my code

[angerami]

 
var img = new Image();
 
var now = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";      //9:00 am - 11:00 pm  
weekday[1] = "Monday";      //11:00 am - 11:00 pm
weekday[2] = "Tuesday";     //11:00 am - 11:00 pm
weekday[3] = "Wednesday";   //11:00 am - 11:00 pm
weekday[4] = "Thursday";    //11:00 am - 11:00 pm
weekday[5] = "Friday";      //9:00 am - 12:00 am 
weekday[6] = "Saturday";    //9:00 am - 12:00 am    
 
var checkTime6 = function() {
  var today = weekday[now.getDay()];
  var timeDiv6 = document.getElementById('timeDiv6');
  var dayOfWeek = now.getDay();
  var hour = now.getHours();
  var minutes = now.getMinutes();
 
  //add AM or PM
  var suffix = hour >= 12 ? "PM" : "AM";
 
  // add 0 to one digit minutes
  if (minutes < 10) {
    minutes = "0" + minutes
  };
 
  if ((dayOfWeek == 0 || dayOfWeek == 1 || dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4) && hour >= 9 && hour <= 22) {
    hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
    timeDiv6.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" />';
    timeDiv6.className = 'open';
    img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOn.gif';
  } 
 
  else if ((dayOfWeek == 5 || dayOfWeek == 6) && hour >= 9 && hour <= 23) {
    hour = ((hour + 11) % 12 + 1);
    timeDiv6.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" /></center>';
    timeDiv6.className = 'open';
    img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOn.gif';
  } 
 
  else {
    if (hour == 0 || hour > 9) {
      hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
    }
    timeDiv6.innerHTML = 'It\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" /></center>' ;
    timeDiv6.className = 'closed';
    img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOff.png';
  }
};
 
setInterval(checkTime6, 1000);
checkTime6();
 
 
var checkTime31 = function() {
  var today = weekday[now.getDay()];
  var timeDiv = document.getElementById('timeDiv31');
  var dayOfWeek = now.getDay();
  var hour = now.getHours();
  var minutes = now.getMinutes();
 
  //add AM or PM
  var suffix = hour >= 12 ? "PM" : "AM";
 
  // add 0 to one digit minutes
  if (minutes < 10) {
    minutes = "0" + minutes
  };
 
  if ((dayOfWeek == 1 ||  dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4 || dayOfWeek == 5) && hour >= 9 && hour <= 23) {
    hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
    timeDiv31.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" />';
    timeDiv31.className = 'open';
    img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOn.gif';
  } 
 
  else if ((dayOfWeek == 0 || dayOfWeek == 6) && hour >= 9 && hour <= 1) {
    hour = ((hour + 11) % 12 + 1);
    timeDiv31.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" /></center>';
    timeDiv31.className = 'open';
    img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOn.gif';
  } 
 
  else {
    if (hour == 0 || hour > 9) {
      hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
    }
    timeDiv31.innerHTML = 'It\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" /></center>' ;
    timeDiv31.className = 'closed';
    img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOff.png';
  }
};
 
 
 
setInterval(checkTime31, 1000);
checkTime31();
 
 
var currentDay = weekday[now.getDay()];
var currentDayID = "#" + currentDay; //gets todays weekday and turns it into id
$(currentDayID).toggleClass("today"); //hightlights today in the view hours modal popup
 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="timebox1"  >
  <div id="timeDiv6"></div>
  <label class="viewOpen6" for="modal-state6">View Hours&nbsp;&nbsp;<i class="fa fa-clock-o"></i></label>
  <input type="checkbox" name="modal-state6" id="modal-state6">
  <div class="modal-overlay6">
    <label for="modal-state6" class="modal-overlay-close6"></label>
 
   <div class="modaltime6">
      <label class="button-close6" for="modal-state6"><i class="fa fa-times"></i></label>
      <h2>We're Open At These Times</h2>
      <div id="Monday" class="dateTime">
        <div class="day">Monday</div>
        <div class="time">11am - 11pm</div>
      </div>
      <br>
      <div id="Tuesday" class="dateTime">
        <div class="day">Tuesday</div>
        <div class="time">11am - 11pm</div>
      </div>
      <br>
      <div id="Wednesday" class="dateTime">
        <div class="day">Wednesday</div>
        <div class="time">11am - 11pm</div>
      </div>
      <br>
      <div id="Thursday" class="dateTime">
        <div class="day">Thursday</div>
        <div class="time">11am - 11pm</div>
      </div>
      <br>
      <div id="Friday" class="dateTime">
        <div class="day">Friday</div>
        <div class="time">9am - 12am</div>
      </div>
      <br>
      <div id="Saturday" class="dateTime">
        <div class="day">Saturday</div>
        <div class="time">9am - 12am</div>
      </div>
      <br>
      <div id="Sunday" class="dateTime">
        <div class="day">Sunday</div>
        <div class="time">9am - 11pm</div>
      </div>
 
 
    </div>
  </div>
</div>
 
<div class="timebox2"  >
  <div id="timeDiv31"></div>
  <label class="viewOpen31" for="modal-state31">View Hours&nbsp;&nbsp;<i class="fa fa-clock-o"></i></label>
  <input type="checkbox" name="modal-state31" id="modal-state31">
  <div class="modal-overlay31">
    <label for="modal-state31" class="modal-overlay-close31"></label>
 
   <div class="modaltime31">
      <label class="button-close31" for="modal-state31"><i class="fa fa-times"></i></label>
      <h2>We're Open At These Times</h2>
      <div id="Monday" class="dateTime">
        <div class="day">Monday</div>
        <div class="time">9am - 12am</div>
      </div>
      <br>
      <div id="Tuesday" class="dateTime">
        <div class="day">Tuesday</div>
        <div class="time">9am - 12am</div>
      </div>
      <br>
      <div id="Wednesday" class="dateTime">
        <div class="day">Wednesday</div>
        <div class="time">9am - 12am</div>
      </div>
      <br>
      <div id="Thursday" class="dateTime">
        <div class="day">Thursday</div>
        <div class="time">9am - 12am</div>
      </div>
      <br>
      <div id="Friday" class="dateTime">
        <div class="day">Friday</div>
        <div class="time">9am - 12am</div>
      </div>
      <br>
      <div id="Saturday" class="dateTime">
        <div class="day">Saturday</div>
        <div class="time">9am - 1am</div>
      </div>
      <br>
      <div id="Sunday" class="dateTime">
        <div class="day">Sunday</div>
        <div class="time">9am - 1am</div>
      </div>
 
 
    </div>
  </div>
</div>
 

/*timee*/
 
.timebox1{
    position:fixed;
    display:block;
    padding:0px;
    top:10px;
    left:10px;
}
 
.timebox2{
    position:fixed;
    display:block;
    padding:0px;
    top:10px;
    right:10px;
}
 
.open {
  color: #27ae60;
  /*border: 2px solid #27ae60;*/
}
 
 
 
.closed {
 
  color: rgba(231, 76, 60, 0.85);
 /*border: 2px solid rgba(231, 76, 60, 0.8);*/
}
 
* {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}
 
 
#timeDiv6, #timeDiv31{
  font-size: 15px;
  text-transform: uppercase;
  text-align: center;
  position:static;
  width: 100%;
  background: transparent;
  margin: 0 auto;
  top: 10px;
  border-radius: 3px;
 /* -webkit-box-shadow: 0 8px 16px -8px #adadad;
  -moz-box-shadow: 0 8px 16px -8px #adadad;
  box-shadow: 0 8px 16px -8px #adadad;*/
  display:block;
  vertical-align: top;
  font-weight: 600;
  background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}
 
 
 
 
 
.viewOpen6, .viewOpen31 {
  font-size: 15px;
  text-transform: uppercase;
  display:block;
  border: 2px solid rgba(70, 70, 70, 0.7);
  max-width: 100%;
  background: #fff;
  color: rgba(70, 70, 70, 0.8);
  margin: 0 auto;
  top:160px;
  padding: 10px;
  border-radius: 3px;
  -webkit-box-shadow: 0 8px 16px -8px #adadad;
  -moz-box-shadow: 0 8px 16px -8px #adadad;
  box-shadow: 0 8px 16px -8px #adadad;
  cursor: pointer;
    border:blue solid 1px;
    position:static;
 
}
 
.viewOpen6 i, .viewOpen31 i {
  color: rgba(70, 70, 70, 0.8);
}
 
@media all and (max-width: 600px) {
  #timeDiv6, #timeDiv31{
    margin-bottom: 20px;
  }
}
 
@media all and (min-width: 601px) {
  #timeDiv6, #timeDiv31 {
    margin-right: 15px;
  }
 
 
}
 
.dateTime  {
  max-width: 320px;
  margin: 0 auto;
}
 
.day {
  display: inline-block;
  float: left;
}
 
.time {
  display: inline-block;
  float: right
}
 
.today {
  color: rgb(200, 85, 39);
  font-weight: 600;
}
 
@media all and (max-height: 420px) {
  #timeDiv6, .viewOpen6,
  #timeDiv31, .viewOpen31
  {
    top: 60%;
  }
}
/* view hours modal */
 
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
 
.modal-overlay6, .modal-overlay31{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(173, 173, 173, 0.5);
  display: none;
  z-index:999;
}
 
#modal-state6, #modal-state31 {
  display: none;
}
 
#modal-state6:checked + .modal-overlay6, 
#modal-state31:checked + .modal-overlay31
 {
  opacity: 1;
  animation: fade-in .4s;
  display: block;
}
 
.modaltime6, .modaltime31{
  position: absolute;
  margin: 0 auto;
  padding: 30px 25px;
  background: #fff;
  right: 0;
  left: 0;
  text-align: center;
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  line-height: 1.8;
    border:red solid 1px;
}
 
 
 
.modaltime6 h2, .modaltime31 h2 {
  margin-top: 0;
  line-height: 25px;
  font-size: 22px;
  border-bottom: 1px solid #dce0d8;
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-weight: 400;
}
 
@media all and (max-width: 470px) {
  .modaltime6 {
    width: 75%;
  }
  .modaltime6 h2{
    font-size: 20px;
  }
 
 
  .modaltime31 {
    width: 75%;
  }
  .modaltime31 h2{
    font-size: 20px;
  }
 
 
 
}
 
#modal-state6:checked + .modal-overlay6 .modaltime6, 
#modal-state31:checked + .modal-overlay31 .modaltime31
{
  top: 20%;
}
 
.modal-overlay-close6, .modal-overlay-close31 {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
 
.button-close6, .button-close31 {
  text-decoration: none;
  position: absolute;
  color: #fff;
  background: #464646;
  padding: 0px 7px;
  font-weight: bold;
  top: 0px;
  right: 0;
  cursor: pointer
}
/*time end*/

its only highlighting my first code not second in "var currentDay" also it goes from modeltime 1-40 so the could should get passed the other models and plus

[chaarmann]

Your code is Javascript. But you are in the Java forum. Please move your question.