根据星期几使页面上的文本变为粗体

Question

I have opening times of attractions on my site and I want it so the text is in bold depending on which day it is. So, if it's Tuesday, 'Tuesday 10am - 4pm' will be in bold. I have managed to get this to work for one attraction div but it doesn't work on any other attraction divs and i'm not sure why.

Website: explorecanterbury.co.uk (to view divs search or click on canterbury cathedral and westgate, as you can see canterbury cathedral works, but westgate doesn't).

HTML

<div class="info-div col-md-5 col-xs-6" id="CDiv" style="background-color:orange;">
    <div class="close" onclick="hide('CDiv')"><span class="close-btn"></spam></div>
        <div class="content col-md-10">
            <h2 class="subtitle">Canterbury Cathedral</h1>
            <img src="images/test.jpg" class="img-responsive">
            <p>St Augustine, the first Archbishop of Canterbury, arrived on the coast of Kent as a missionary to England in 597 AD. He came from Rome, sent by Pope Gregory the Great.</p>
            <h2 class="subtitle">Find out more...</h1>
            <ul id="shareMenu">
                <li class="shareLi"><span class="webIcon"></span></li>
                <li class="shareLi"><span class="fbIcon"></span></li>
                <li class="shareLi"><span class="twitterIcon"></span></li>
                <li class="shareLi"><span class="instaIcon"></span></li>
            </ul>
            <h2 class="subtitle">Opening Times</h2>
            <ul style="list-style: none; padding: 0px;">
                <li><span class="weekday" id="1">Monday: 9am - 5.30pm</span></li>  
                <li><span class="weekday" id="2">Tuesday: 9am - 5.30pm</span></li>
                <li><span class="weekday" id="3">Wednesday: 9am - 5.30pm</span></li>
                <li><span class="weekday" id="4">Thursday: 9am - 5.30pm</span></li>
                <li><span class="weekday" id="5">Friday: 9am - 5.30pm</span></li>
                <li><span class="weekday" id="6">Saturday: 9am - 5.30pm</span></li>
                <li><span class="weekday" id="0">Sunday: 12.30pm - 2.30pm</span></li>    
            </ul>  
            <h2 class="subtitle">Related Attractions</h1>
                <div class="col-sm-6 col-md-12">
                    <div class="clearfix">
                        <div id="thumbcarousel" class="carousel slide" data-interval="false">
                            <div class="carousel-inner">
                                <div class="item active">
                                    <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fff&amp;text=Product+Main"></div>
                                    <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&amp;text=Product+Image+2"></div>
                                </div><!-- /item -->
                                <div class="item">
                                    <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://placehold.it/100/612b65/fff&amp;text=Product+Image+5"></div>
                                    <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100/00ffcc/000&amp;text=Product+Image+6"></div>
                                </div>
                                <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                                </a>
                                <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
                                <i class="glyphicon glyphicon-chevron-right"></i>
                                </a>
                            </div> 
                        </div>  
                    </div>
                </div>
            </div>  
        </div>
    </div>
</div>

<div class="info-div col-md-5 col-xs-6" id="WDiv" style="background-color:orange;">
    <div class="close" onclick="hide('WDiv')"><span class="close-btn"></spam></div>
        <div class="content col-md-10">
            <h2 class="subtitle">Westgate Towers</h1>
            <img src="images/test.jpg" class="img-responsive">
            <p>The Westgateis a medieval gatehouse in Canterbury,Kent, England. This 60-foot high western gate of the city wall is the largest surviving city gate in England. Built of Kentish ragstone around 1379, it is the last survivor of Canterbury's seven medieval gates, still well-preserved and one of the city's most distinctive landmarks. The Tower is a scheduled ancient monument and Grade I listed. Visitors can explore its rich history and take in the spectacular views of the city from the battlements viewpoint.</p>
            <h2 class="subtitle">Find out more...</h1>
            <ul id="shareMenu">
                <li class="shareLi"><span class="webIcon"></span></li>
                <li class="shareLi"><span class="fbIcon"></span></li>
                <li class="shareLi"><span class="twitterIcon"></span></li>
                <li class="shareLi"><span class="instaIcon"></span></li>
            </ul>
            <h2 class="subtitle">Opening Times</h2>
            <ul style="list-style: none; padding: 0px;">
                <li><span class="weekday" id="1">Monday: 11am - 4pm</span></li>  
                <li><span class="weekday" id="2">Tuesday: 11am - 4pm</span></li>
                <li><span class="weekday" id="3">Wednesday: 11am - 4pm</span></li>
                <li><span class="weekday" id="4">Thursday: 11am - 4pm</span></li>
                <li><span class="weekday" id="5">Friday: 11am - 4pm</span></li>
                <li><span class="weekday" id="6">Saturday: 11am - 4pm</span></li>
                <li><span class="weekday" id="0">Sunday: 11am - 4pm</span></li>    
            </ul>  
            <h2 class="subtitle">Related Attractions</h1>
                <div class="col-sm-6 col-md-12">
                    <div class="clearfix">
                        <div id="thumbcarousel" class="carousel slide" data-interval="false">
                            <div class="carousel-inner">
                                <div class="item active">
                                    <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fff&amp;text=Product+Main"></div>
                                    <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&amp;text=Product+Image+2"></div>
                                </div><!-- /item -->
                                <div class="item">
                                    <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://placehold.it/100/612b65/fff&amp;text=Product+Image+5"></div>
                                    <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100/00ffcc/000&amp;text=Product+Image+6"></div>
                                </div>
                                <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                                </a>
                                <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
                                <i class="glyphicon glyphicon-chevron-right"></i>
                                </a>
                            </div> 
                        </div>  
                    </div>
                </div>
            </div>  
        </div>
    </div>
</div>

CSS

.highlight {
font-weight:bold;
}

JS

var today = new Date().getDay();

$("#" + today).addClass("highlight");

Answer 1

Try setting the class instead of the id.

<span class="weekday d1">
<span class="weekday d2">
<span class="weekday d3">

etc

var today = new Date().getDay();

$(".d" + today).addClass("highlight");

id=1 is duplicated in your html, this could cause troubles

Answer 2

You can remove the id tags altogether and highlight the correct line using :nth-of-type
This method highlights the correct day for both sets of lists.

HTML

<li><span class="weekday"></span></li>
<li><span class="weekday"></span></li>
<li><span class="weekday"></span></li>

JS

var date = new Date();
var dayOfWeek = date.getDay();

$('li:nth-of-type(' + dayOfWeek + ')').find('.weekday').addClass('highlight');