Genre buttons

HTML

<div id="makeJSFshowPics">
    <img src="http://i.imgur.com/7ftvzYB.png" alt="High Interest"><img src="http://i.imgur.com/u8i9Coo.png" alt="Okay I guess"><img src="http://i.imgur.com/v66NbIR.png" alt="Do Not Want">   
</div>
        
<div id="highI">
     <h1>High Interest</h1>

</div>
<div id="nI">
     <h1>Neutral Interest</h1>

    <div id="western"> <span class="label">Western</span> 
        <input type="radio" name="western" value="yes" id="westerny" class="yes">
        <label for="westerny"><img src="http://i.imgur.com/7ftvzYB.png" alt="High Interest"></label>
		<input type="radio" name="western" value="ok" id="westerno" class="ok">
        <label for="westerno"><img src="http://i.imgur.com/u8i9Coo.png" alt="Okay I guess"></label>
        <input type="radio" name="western" value="no" id="westernn" class="no">
        <label for="westernn"><img src="http://i.imgur.com/v66NbIR.png" alt="Do Not Want"></label>

    </div>
  <div id="romance"> <span class="label">Romance</span> 
        <input type="radio" name="romance" value="yes" id="romancey" class="yes">
        <label for="romancey"><img src="http://i.imgur.com/7ftvzYB.png" alt="High Interest"></label>
		<input type="radio" name="romance" value="ok" id="romanceo" class="ok">
        <label for="romanceo"><img src="http://i.imgur.com/u8i9Coo.png" alt="Okay I guess"></label>
        <input type="radio" name="romance" value="no" id="romancen" class="no">
        <label for="romancen"><img src="http://i.imgur.com/v66NbIR.png" alt="Do Not Want"></label>

    </div>

  <div id="fantasy"> <span class="label">Fantasy</span> 
        <input type="radio" name="fantasy" value="yes" id="fantasyy" class="yes">
        <label for="fantasyy"><img src="http://i.imgur.com/7ftvzYB.png" alt="High Interest"></label>
		<input type="radio" name="fantasy" value="ok" id="fantasyo" class="ok">
        <label for="fantasyo"><img src="http://i.imgur.com/u8i9Coo.png" alt="Okay I guess"></label>
        <input type="radio"...

CSS

div {
    margin:0;
    padding:2px;
}
div div {
    margin:2px;
    padding:0px 3px;
}
#nI div {
    margin:0px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:2px solid #aaa;
    overflow:auto;
    float:left;
}
#highI div {
    margin:4px;
    background-color:#efffef;
    border-radius:4px;
    border:2px solid #aaa;
    overflow:auto;
    float:left;
}
#lowI div {
    margin:4px;
    background-color:#ffefef;
    border-radius:4px;
    border:2px solid #aaa;
    overflow:auto;
    float:left;
}
#highI {
    background:#efe;
    clear:both;
    display:block;
    overflow:auto;
}
#nI {
    background:#ccc;
    clear:both;
    display:block;
    overflow:auto;
}
#lowI {
    background:#fee;
    clear:both;
    display:block;
    overflow:auto;
}


input[type="radio"] {
    display:none;
    margin:0;
}
input[type="radio"] + label {
    display:inline-block;
    width:16px;
    height:18px;
    padding: 4px 3px 3px 3px;
    margin:0;
    background:#ffffff left top no-repeat;
}
input[type="radio"].yes:checked +label {
    background:#cfc;
}
input[type="radio"].ok:checked +label {
    background:#ddd;
}
input[type="radio"].no:checked +label {
    background:#fcc;
}

JavaScript

$(".yes").on("click", function (e) {
    $("label.yes").parent().appendTo("#highI");
    e.preventDefault();
});
$('.no').on("click", function (e) {
    $(".no").parent().appendTo("#lowI");
    e.preventDefault();
});
$('.ok').on("click", function (e) {
    $(".ok").parent().appendTo("#nI");
    e.preventDefault();
});