Change Font colour when you click on a element

I am trying to work out how, when I click on my "left" and "center" containers my "footertext" changes to Red and when I click on any of my containers (left right and center) it goes back to white

My current HTML is this:

<p class="footertext" style="color:red">Designed by Clarke Cribb<br></p>


    <div class="container" id= "left" >
        <h1 style="color:white"><a>HAIR</a></h1>
    </div>

    <div class= "container" id= "center">
        <h1 style="color:white"><a>BEAUTY<a/></h1>
    </div>

    <div class="container" id= "right">
        <h1 style="color:white"><a>BARBERS</a></h1>
    </div>
</div>

My Javascript is this:

<script>
    $(document).ready(function(){
        $("#left").click(function(){
            $("footertext").css("color","red");
        });
    });
</script>

If anyone can help I would appreciate it. Cheers. Clarke