listboxes in html, javascript and css

I found this JSFiddle which does what I want. However, I wanted the boxes to be inline and buttons as arrows.

So I modified above fiddle into this JSFiddle.

1) However, this is not working. Can someone please help with what am I doing wrong ? I am not able to move elements from left to right and vice versa.

2) I also want the width and height of my Select boxes as fixed with no scroll bar initially. For e.g. say 6 options. However, if the number of options increases (for e.g. it becomes 10), a scroll bar should automatically appear. Can someone point me to some tutorial which shows this ?

My code:

HTML:

<div class="bloc">
    <select id="list1" multiple="multiple" rows=2>
        <option value=1>Option 1</option>
        <option value=2>Option 2</option>
        <option value=3>Option 3</option>
        <option value=4>Option 4</option>
        <option value=5>Option 5</option>
        <option value=6>Option 6</option>
    </select>
   </div>
 <div style="display:inline-block;">
    <input id="button1" type="button" value=">>" />
    <br/>
    <input id="button2" type="button" value="<<" />
 </div>
<div class="bloc">
    <select id="list2" multiple="multiple" rows=2>        
    </select>   
</div>

Javascript:

$(function(){
    $("#button1").click(function(){
        $("#list1 > option:selected").each(function(){
            $(this).remove().appendTo("#list2");
        });
    });

    $("#button2").click(function(){
        $("#list2 > option:selected").each(function(){
            $(this).remove().appendTo("#list1");
        });
    });
});

CSS:

 .bloc { display:inline-block; vertical-align:top; border:solid grey 1px; width:100px;}