Why doesn't jQuery's addClass work for me?

Question

I've been looking around but can't seem to find a solution to my problem, despite the many many questions there already are about this subject.

I am trying to use jQuery's addClass to change the appearance of my dynamically generated navigation bar as well as a static div I have across the website.

However a few weird things are occuring, here is my code:

jQuery:

if ($( "body" ).hasClass("page-id-14")) {
    $("#box").addClass("active1");
    alert("why is it not red?");
} else if ($("body").hasClass("page-id-12")) {
    $("#box").addClass("active2");
    alert("Why is it not blue?");
} else if ($("body").hasClass("page-id-10")) {
    alert("Why is it not yellow?");
    $("#box").addClass("active3");
};

Relevant HTML

<div style="width:50px; height:100px" id="box" div>

CSS:

 .active1{
    background:red !important;
 }
 .active2{
    background:blue !important;
 }

 .active3{
    background:yellow !important;
 }

The first weird problem is that it only recognizes when body has the class "page-id-12" and not the other two occurrences; unfortunately I can't give you a link as I am developing on localhost.

The second and biggest problem is that it does not add the class to the #box div which I am currently testing it on.

Am I drunk or is there actually some weird stuff going on here?

Added my full html:

<div class="container-fluid">
    <div class="row" id="wrapper">
        <div class="col-md-2"></div>
        <div class="col-md-8">

            <div class="row"> <!-- Logo row -->
                <div class="col-md-12" id="logo"></div>
            </div>

                <div class="row" id="navbar"> <!-- Navigation row -->
                    <div class="col-md-12" id="m1">

                        <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
                    </div>
                   <!-- <div class="col-md-4" id="m2">Industrilakering</div>
                    <div class="col-md-4" id="m3">Gulvservice</div> -->
                </div>


                <div class="row"> <!-- Slider row -->
                    <div class="col-md-12" id="slider"></div>
                </div>



                <div class="row"> <!-- Main content row -->
                    <div class="col-md-4" id="sidebar">
                        <?php wp_nav_menu( array( 'theme_location' => 'malerservice' ) ); ?>
                    </div>
                    <div class="col-md-8" id="content">
                        <?php
                            if ( have_posts() ) : while ( have_posts() ) : the_post();
                                the_content();
                            endwhile;
                            else :
                                _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
                            endif;
                         ?>
                    </div>
                </div> <!-- Main Content -->


        </div> <!-- div col-md-8 -->


        <div class="col-md-2" id"=social">
            <a href="http:/www.faceboook.com"><div id="fbicon"></div></a>
        <a href="http:/www.google.dk"><div id="gplusicon"></div></a>

        </div>





    </div>

                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-8" id="gallery">
                        <div style="width:50px; height:100px" id="box" ></div>
                    </div>
                    <div class="col-md-2"></div>
                </div>
</div>  <!-- Container fluid -->





<?php get_footer(); ?>

Answer 1

Here is an answer to the most recent comment (how to do it with css)

body.page-id-14 #box{
    background-color:red;
}
body.page-id-12 #box{
   background-color:blue;
}

body.page-id-10 #box{
   background-color:yellow;
}

Answer 2

After minor modififying of HTML Layout to validly close div everything works well. I've updated html from:

<div style="width:50px; height:100px" id="box" div>

To

<div style="width:50px; height:100px" id="box">Some text</div>

 if ($( "body" ).hasClass( "page-id-14" )) { $("#box").addClass("active1"); alert("why is it not red?"); }else if ($("body").hasClass("page-id-12")){ $("#box").addClass("active2"); alert("Why is it not blue?"); }else if ($("body").hasClass("page-id-10")){ alert("Why is it not yellow?"); $("#box").addClass("active3"); }; 

 .active1{ background:red !important; } .active2{ background:blue !important; } .active3{ background:yellow !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body class = "page-id-14"> <div style="width:50px; height:100px" id="box">Some text</div> </body>