Jquery 를 이용해서 Fade in out 버튼들을 만들고 싶습니다

jquery_fade.js 파일을 불러서 쓰는데 이하가 js 파일 내 전체입니다

 /* JQuery 를 이용한 Layer Fade In/Out 스크립트
----------------------------------------------------------------------------- */

jQuery(function($){
 function layer_open(el){
  //$('.layer').addClass('open');
  $('.layer').fadeIn();
  var temp = $('#' + el);
  if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
  else temp.css('top', '0px');
  if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+
 '+
 '+temp.outerWidth()/2+'px');
  else temp.css('left', '0px');
 }
 $('#layer_open').click(function(){
  layer_open('login'); /* 열고자 하는 것의 아이디를 입력 */
  return false;
 });
 $('.layer .bg').click(function(){
  $('.layer').fadeOut();
 });
 $('#layer_close').click(function(){
  $('.layer').fadeOut();
  return false;
 });
 $(document).ready(function(){
 });
});

이것을 layout이나 기타 파일에서

<span class="button medium"><a href="#" id="layer_open">로그인</a></span> 버튼을 넣고

끝에    

<div class="layer">
    <div class="bg"></div>
    <div class="layer_area" id="login"><p style="width:400px; text-align:justify; font-family:Malgun gothic;">로그인창</p><br /><span class="button medium"><a href="#" id="layer_close">팝업창 닫기</a></span></div>

</div>

를 넣어 사용합니다

여기서 질문을 드리고 싶은게 버튼을 여러개 넣고, layer 를 여러개 부르고 싶은데 이상하게 함수명만 바꾸면

버튼들이 제대로 동작을 안하거나 버튼을 누르면 CSS가 깨지는것 같습니다 (버튼 모양이 유지가 안되고 깨진다는..)

이하는 버튼에 관련된 CSS 파일이고 첨부파일은 버튼에 사용하는 이미지입니다

 
/* Button Common
----------------------------------------------------------------------------- */
.button,
.button * { position:relative; margin:0; padding:0; display:inline-block; text-decoration:none !important; border:0; font-size:12px; white-space:nowrap; background:url(../images/button.gif) no-repeat; vertical-align:top; overflow:visible; color:#333;}
.button { margin-right:4px; }
.button * { left:4px; cursor:pointer; _cursor:hand; }
.button.medium, .button.medium * { height:24px; line-height:21px; } /* 맑은고딕을 사용할 경우 21px, 돋움을 사용할 경우 24px 사용 */
.button.medium { background-position:left 0; }
.button.medium * { padding:0 10px 0 6px; font-size:12px; background-position:right top; }
/* Button Hover */
.button *:hover,
.button *:active,
.button *:focus { color:#06a; }
/* Button Icon Variation */
.button.icon * { padding-left:20px; }
.button.icon span { width:20px; margin-right:-20px; padding:0 !important; }
.button.medium .check { background-position:4px -150px; }
.button.medium .add { background-position:-16px -150px; }
.button.medium .delete { background-position:-34px -150px; }
.button.medium .calendar { background-position:-56px -150px; }
.button.medium .refresh { background-position:-76px -150px; }
.button.medium .download { background-position:-96px -151px; }

버튼을 여러개 만들고 싶으면 그냥 click (function) 여러개 복사하고, html 파일 내에서도 버튼 여러개 넣고

id만 바꿔주고 밑에 레이어도 저 문단 째로 여러개 복사해서 id만 바꿔쓰면 안되는건가요?

Jquery는 뭔가 간단해보이면서 꼭 이상하게 생각대로 안나와서 좀 어려운것 같습니다..;;

고수님들의 많은 질타 부탁드립니다 ㅠ

p.s

텀프로젝트가 기말고사 대용이라 JSP+Tomcat 으로 쇼핑몰을 만들고 있습니다

혹시 상품을 특정레이어에 Drag & Drop 할시 특정레이어에 추가되는, 즉, 장바구니를 Drag & Drop 으로 JSP로 구성하고 싶은데

Drag & Drop 관련 JSP 잘 설명된곳 아시는분 있으시면 URL만 좀 부탁드리고 싶습니다!