JQuery function
<p>Okay so I think tonight brain is not working, as second question of the hour!  I have the following code:</p>

<pre><code>function merge_ts(){
    var arr = $.unique(css_ts('bookings'));
    var dai = $.unique(css_ts('diary'));

    $.each(arr, function(index, bid) { 
        $("input[type='hidden'][class^='bookings'][value=" + bid + "]").parent('div').css({'background-color':'#00008b','border-color':'#ffffff #00008b #ffffff #00008b','border-width':'1px 1px 0px 1px'});
        $("input[type='hidden'][class^='bookings'][value=" + bid + "]:first").parent('div').css({'border-color':'#ffffff #00008b #ffffff #ffffff','border-width':'1px 1px 0px 1px'});
        $("input[type='hidden'][class^='bookings'][value=" + bid + "]:last").parent('div').css({'border-color':'#ffffff #ffffff #ffffff #00008b','border-width':'1px 1px 0px 1px'});
    });

    $.each(dai, function(index, bid) { 
        $("input[type='hidden'][class^='diary'][value=" + bid + "]").parent('div').css({'background-color':'#950404','border-color':'#ffffff #950404 #ffffff #95040','border-width':'1px 1px 0px 1px'});
        $("input[type='hidden'][class^='diary'][value=" + bid + "]:first").parent('div').css({'border-color':'#ffffff #950404 #ffffff #ffffff','border-width':'1px 1px 0px 1px'});
        $("input[type='hidden'][class^='diary'][value=" + bid + "]:last").parent('div').css({'border-color':'#ffffff #ffffff #ffffff #950404','border-width':'1px 1px 0px 1px'});
    });
}
</code></pre>

<p>The code finds inputs that match a class and then applies styling to the all those elements, then applies styling to the first and last elements in the group.  </p>

<p>The code currently does this for two classes, I have eight classes each with a different color, my question is to find a way of doing this without writing out the code eight times.</p>
