Jquery - Assign array values to dropdowns

I have dropdowns that are being appended dynamically on a page and on the same page, there's an array being posted, so that, the length of the array will always equal the number of dropdowns appended. For example:

<select name="cavie" class="optimum"><option value=""></option><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option></select>

<select name="cavie" class="optimum"><option value=""></option><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option></select>

<select name="cavie" class="optimum"><option value=""></option><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option></select>

and a javascript array:

var vals = ["4", "8", "12"];

The aim is to assign the array values to the dropdowns in their order.

Currently, I'm using a for loop but this will set all the select options to the value of the last array:

var vals = ["4", "8", "12"];

for(var i in vals)
{
    $('.optimum').val(vals[i]); 
}

The above is laid out in this fiddle:

https://jsfiddle.net/epzjdswn/2/

So how can this be achieved?