I am working on a grid of images that when clicked will show a piece of information relating to that grid. I've managed to get all of that logic working. However, I've run into an issue with styling the elements on click and hover.

When the user hovers over each div I would like to display an orange border which I have working.

```
    $('.testimonial-box .col-sm-3').hover(function () {
        $(this).toggleClass('testimonials-border'); //Add orange border on hover
    });

```

When the user clicks on the div I would like to add the orange border permanently until another div is clicked. This way they can see which one is active.

```
$('.testimonial-box .col-sm-3').click(function () {
    var testimonial = $(this).attr('id');
    $(this).toggleClass('testimonial-border').siblings().removeClass('testimonial-border');
    switch (testimonial) {
        case "testimonial1":
            $('.client-quote').html('Client 1 Testimonial');
            $('.client-name').html('Client 1');
            break;

```

I've a fiddle of what I'm trying to achieve. There are two rows. The logic works for each row but it doens't work across rows. If you select a client from the bottom row it will apply the border. If you then select a client from the top row it will not remove the border from the previous div.

<https://jsfiddle.net/javacadabra/avbn0myh/>

I'd appreciate any help on this, I can post the code on this as well if you'd like, however it's all containined and working as is in my fiddle above.

Many thanks