How to add an Array of classes to an element using jQuery? Ex. Add different color to different using [array]

With jQuery 3.3.0, the .addClass(), .removeClass(), and .toggleClass() methods accept an array of classes. We will see how to add different color to n number of div elements on jQuery 1.11.0

In this scenario, we will be applying different class to 7 box. The HTML result looks like this

The colors from array are assigned to the element using .each function. jQuery logic is below:

and CSS to design the boxes

The final result is shown below

See fiddle.