i know there are other ways to do this, but i specificaly need to do it this way. its actually a lot simpler i would think, i just cant figure out how to do this

all i want to do have the all the css in my code so that it would look like this

<style type="text/css">
#style 1 {
}
#style 2 {
}
</style>

<style type="text/css">
#style 1 {
}
#style 2 {
}
</ style >

so supposably if the divs have the same ids, the one in the bottom will be used to style the page so what i want to do is wrap the second set of style as comments, so that they will be ignored

<style type="text/css">
#style 1 {
}
#style 2 {
}
</style>

<! --
<style type="text/css">
#style 1 {
}
#style 2 {
}
</ style >
-->
now the first ones will be used.

SO finally what i want to do, is have some sort of javascript that will insert and remove the tags that make them comments. Dont need cookies or anything just reall simple. once again i know that this can be done other ways but for my current situation i need it to be like this

is there any way to do this?

thanks