Issue with Javascript, need to re-verse an action
<p>this is my code:</p>

<p><a href="http://jsfiddle.net/8ErDu/6/" rel="nofollow">http://jsfiddle.net/8ErDu/6/</a></p>

<p>It gets values and changes the CSS on those values based on the values selected.</p>

<p>User selects: start 2 end 4</p>

<p>2-3-4 get: css( "background-color","red" );</p>

<p>While the rest remain green, i want to be able to make this work like this aswell:</p>

<p>User selects: start 4 end 2</p>

<p>4-1-2 get: css( "background-color","red" );</p>

<p>I am kind of lost here, as i dont know how to do this, any suggestion is welcome.</p>

<p>JSfiddle posted here to:</p>

<p>html:</p>

<pre><code>&lt;form id="priceCalcForm"&gt;

&lt;p&gt;from color&lt;/p&gt;
&lt;select name="from_color" id="from_color" style="width:25%; text-align:center;     font-weight:bold;" onchange="placeColor()"&gt;

&lt;option value="" name="" selected="selected"&gt;....&lt;/option&gt;
&lt;option value="tp1" name=""&gt;01&lt;/option&gt;  
&lt;option value="tp2" name=""&gt;02&lt;/option&gt;  
&lt;option value="tp3" name=""&gt;03&lt;/option&gt;  
&lt;option value="tp4" name=""&gt;04&lt;/option&gt;
&lt;/select&gt;

&lt;p&gt;to color&lt;/p&gt;
&lt;select name="to_color" id="to_color" style="width:25%; text-align:center; font-weight:bold;" onchange="placeColor()"&gt;

&lt;option value="" name="" selected="selected"&gt;....&lt;/option&gt;
&lt;option value="te1" name=""&gt;01&lt;/option&gt;  
&lt;option value="te2" name=""&gt;02&lt;/option&gt;  
&lt;option value="te3" name=""&gt;03&lt;/option&gt;  
&lt;option value="te4" name=""&gt;04&lt;/option&gt;
&lt;/select&gt;

&lt;table id="timer_table" cols="24" width="100%" style="text-align:center; background-color:#80A74C"&gt;
  &lt;tr style="border-style:outset; border-color:green;"&gt;

&lt;td id="color1"&gt;01&lt;/td&gt;
&lt;td id="color2"&gt;02&lt;/td&gt;
&lt;td id="color3"&gt;03&lt;/td&gt;
&lt;td id="color4"&gt;04&lt;/td&gt;

 &lt;/tr&gt;

  &lt;div id="totalPrice"&gt;&lt;/div&gt;
&lt;/table&gt;

&lt;/form&gt;
</code></pre>

<p>JS:</p>

<pre><code>var picked_time = {};
for(var i = 1; i &lt;= 23; i++ ) { // loop the rest
   picked_time['tp'+i] = i;
}

var end_time = {}; 
for(var i = 1; i &lt;= 23; i++ ) { // loop the rest
   end_time['te'+i] = i;
}

function placeColor() {

var evF = 0; // end values 0
var evT = 0; // end values 0

var theForm = document.forms["priceCalcForm"]; // target form

var from_color = theForm.elements["from_color"]; // target from level &lt;select&gt;
var to_color = theForm.elements["to_color"]; // target from level &lt;select&gt;

evF = picked_time[from_color.value]; // get the value etc from there
evT = end_time[to_color.value]; // get the value etc from there

$( 'td[id^="color"]' ).css( "background-color", "" );

if (evF &lt;= evT) {
    for( var index = evF - 1; index &lt; evT; index++ ) {
        $( "#color"+( index + 1 ) ).css( "background-color","red" ); 
    };
};
};
</code></pre>
