How can I have a different background color for each marquee?

Question

Ive been asked by a client to use in a page template and the client have asked if its possible to change the background colour of the marquee per marquee so when marquee 1 ends its starts marquee 2 but uses background xxx then when that ends it starts marquee 3 with background xxx,

I've seen javascript been used with on with marquee but not a decent example, any ideas on how to achieve such a task, this is what I have so far:

<marquee id="marquee1" onfinish="switch_marque();">Test Run 1</marquee>
<marquee id="marquee2" onfinish="switch_marque();">Test Run 2</marquee>
<marquee id="marquee3" onfinish="switch_marque();">Test Run 3</marquee>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
   $( document ).ready(function() {
       function switch_marquee(){
           $(this).css("background-color","green"); 
       };
   )};
</script>   

Answer 1

The switch_marque() function shouldn't be inside the $(document).ready() as it will only be called when the marquees are loaded.

Before I continue:

Marquee is considered an OBSOLETE feature of HTML5! Browsers might drop support in the future. Try to avoid it and use CSS solutions instead!

(source)

<marquee id="marquee1" onfinish="switch_marque(1);">Test Run 1</marquee>
<marquee id="marquee2" onfinish="switch_marque(2);">Test Run 2</marquee>
<marquee id="marquee3" onfinish="switch_marque(3);">Test Run 3</marquee>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

    function switch_marquee(value){

       var nextMarquee = (value++)%3;
       $("#marquee" + nextMarquee).css("background-color","green"); 
    };
</script>