Widget problem in blogger sidebar

I would like to have a section on my blog for books I am reading or recently read and a separate section for movies i have recently seen. I like the"List for blog sidebars (javascript)" for the books (alot of the books are easily recognizable by a thumbnail, so the description is beneficial) and the "Image collage (html)" for the movies. That arrangement is not a problem except I would like to add movies to listal and have that be reflected on the widget on my blog, like it does with the javascript widget. So I uploaded the "List for blog sidebars (javascript)" for both the books section and the movie section. I left the books section alone and altered the movie section. But changing the code seems to effect both sections. Is there a way to only effect one widget at a time? You can check out the beginnings of the blog [Link removed - login to see]

Code for the book section:

div#listallist {width:100%;}
div#listallist div.item {width:100%;float:left; padding:2px; vertical-align:top;}
div#listallist img.product {float:left; margin:2px;}
div#listallist span.link {}
div#listallist p {position:relative; margin:1px;}




Code for the movie section:

div#listallist {width:300px;}
div#listallist div.item {width:100px;float:left; padding:0px; vertical-align:top;}
div#listallist img.product {float:left; margin:0px;}
div#listallist span.link {display: none;}
div#listallist p {position:relative; margin:0px;}

There is no way to change separate widgets at the moment but I will think of ways to support styles for widgets.