Having trouble debugging this jquery

Question

OK, the code's supposed to work like this fiddle http://jsfiddle.net/mjmitche/6nar4/ where any of the boxes on the left can be dropped into the boxes inside the black box.

On my live site, it's not working. If you go to this web address, and wait about 10 seconds a drop down menu will appear with a button "confirm" beside it. Click confirm and it will open a new page. The four boxes on the right of the new page are all draggable, and the four little boxes in the white box are all droppable. However, in actual fact, only the little red box--which is "#chair2" in the code below-- is droppable. #chair1, #chair2, #chair3 are not accepting the drop.

prupt.com

This is the section of code that sets droppable and draggable

$(document).ready(function($) {    
$("#cloud1, #cloud2, #cloud3, #cloud4").draggable(); 
$("#chair1, #chair2, #chair3, #chair4").droppable({           
  accept: "#cloud1, #cloud2, #cloud3, #cloud4",  
  activeClass: "ui-state-hover",   
  hoverClass: "ui-state-active",      
   drop: function (event, ui) {  
   $(this)     
   .addClass ("ui-state-highlight")    
   .find ("p")    
   .html("dropped");          
 $("#topnav4").css({'background':'pink'}); 
             }      
      }); 
 });  

This is all the jquery code from start to finish

$(document).ready(function(){       
$(init);   
}); 

function init() {
cloudshow();
}
function cloudshow() {
$("#intro").fadeIn(1000, function(){
    $("#intro2").fadeIn(1000, function(){
    $("#cloud1").fadeIn(2000, function(){
    $("#cloud2, #cloud5").fadeIn(2000, function(){
    $("#cloud3, #cloud4, #cloud6").fadeIn(2000, function(){
    $("#message").fadeIn(1000, function() {
    $("#contactform").fadeIn(1000)
    });  
    });

    });
    });
    });
});
};


var img1 = "url('/wp-content/themes/thesis_18/custom/images/map.jpg') repeat";
$(".submit").click(function(){
$("body.custom").css({background: img1});   
$("#topnav4, #cloud1, #cloud2, #cloud3, #cloud4, #cloud5, #cloud6, #intro, #intro2, #message, #contactform").fadeOut(1000, function (){
$("#sidenav").fadeIn(1000, function(){
        $("#topnav4").css({'background': 'none', 'display':'block'});
    $("#bigbox").fadeIn(1000, function(){
    $("#cloud1").css({'display':'block', 'position':'absolute','left':'600px', 'top': '50px', 'z-index': '2'});
        $("#cloud2").css({'display':'block', 'position':'absolute','left':'600px', 'top': '150px', 'z-index': '2'});    
    $("#cloud3").css({'display':'block', 'position':'absolute','left':'600px', 'top': '250px', 'z-index': '2'});
        $("#cloud4").css({'display':'block', 'position':'absolute','left':'600px', 'top': '350px', 'z-index': '2'});


    });
    });
     }); 
    });


$(document).ready(function($) {    
$("#cloud1, #cloud2, #cloud3, #cloud4").draggable(); 
$("#chair1, #chair2, #chair3, #chair4").droppable({           
  accept: "#cloud1, #cloud2, #cloud3, #cloud4",  
  activeClass: "ui-state-hover",   
  hoverClass: "ui-state-active",      
   drop: function (event, ui) {  
   $(this)     
   .addClass ("ui-state-highlight")    
   .find ("p")    
   .html("dropped");          
 $("#topnav4").css({'background':'pink'}); 
             }      
      }); 
 });  

Answer 1

You are including jQuery thrice on the page. In Firebug console, if you type jQuery.fn.draggable, you'll get undefined. It looks like including jQuery multiple times is causing this.