Run CSS inside JQuery/Javascript -

i have problems webpage. have 4 different images grayscaled using css. have created .svg file make possible. want whenever user clicks image grayscale filter disabled, showing original colors. css has :active , :hover. want during click. here's code:

//css <style type="text/css">  #main, #beverage, #set, #appetizer { filter: url(filters.svg#grayscale); /* firefox 3.5+ */ filter: gray; /* ie6-9 */ -webkit-filter: grayscale(1); /* google chrome & safari 6+ */ } #main { filter: none; -webkit-filter: grayscale(0); }  //images <td> <img src="main.png" width="80" style="cursor:pointer" id="main"><br> <img src="beverage.png" width="80" style="cursor:pointer" id="beverage"><br> <img src="set.png" width="80" style="cursor:pointer" id="set"><br> <img src="set.png" width="80" style="cursor:pointer" id="appetizer"><br> </td> 

you can set class grayscale filter , remove when image clicked

html

<img src="main.png" width="80" style="cursor:pointer" id="main" class="grayscale"><br> <img src="beverage.png" width="80" style="cursor:pointer" id="beverage" class="grayscale"><br> <img src="set.png" width="80" style="cursor:pointer" id="set" class="grayscale"><br> <img src="set.png" width="80" style="cursor:pointer" id="appetizer" class="grayscale"><br> 

css

.grayscale {     filter: url(filters.svg#grayscale); /* firefox 3.5+ */     filter: gray; /* ie6-9 */     -webkit-filter: grayscale(1); /* google chrome & safari 6+ */ } 

jquery

$('.grayscale').click(function(){     $(this).removeclass('grayscale'); });