Change div id on click of a button?

Question

Right now I'm working to create a website that can showcase multiple images on the homepage, that can cycle by the click of a button. Almost like a gallery but more geared towards page previews. What I am trying to figure out is how to change a div's id/class when a button is clicked.

I have looked at a few other questions, but none that show this happening for 4 different ids.

I am very new to JavaScript, and am trying to figure it out to best suit my situation.

Here is the jsFiddle that I have made for my page. The goal is to have the buttons at the top change the green div #Filler to a new id/class on click.

http://jsfiddle.net/xCGDT/1/

#Filler {
margin: auto;
max-height: 700px;
width: 1400px;
background-color: green;
max-width: 1366px;
height: 800px;
z-index: 1;
margin-top: -250px;
overflow: inherit;
background-image: url(nature5.jpg);
animation: Filler 1s 1;
-webkit-animation: Filler 1s 1;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
opacity:1; }

changed to

#Filler2 {
margin: auto;
max-height: 700px;
width: 1400px;
background-color: red;
max-width: 1366px;
height: 800px;
z-index: 1;
margin-top: -250px;
overflow: inherit;
animation: Filler 1s 1;
-webkit-animation: Filler 1s 1;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
opacity:1;

}

Like I said I'm very new to this, and this is for a WebDesign class project.

Answer 1

Use Javascript:

document.getElementById('Filler').id = 'Filler2';

Answer 2

Try

Include jquery library and do as

$(function() {
    $('#Filler').click(function() {
        $(this).attr('id', 'Filler2');
    });
});