Q:

How to toggle the movement between two divs? 

I have made two boxes with div to move them with arrow keys and it works just fine with a single box.  But when I added the second box, they both started to move at the same time even though I've given them different IDs.  What I want to achieve is that when the user hits Spacebar, the first box to be disabled and the second box activated.  I've also searched up for something similiar but I could not find anything.  So I have made a JSFiddle here so you can take a closer look. 
And this is my JQuery code:
<script>
        jQuery(document).keydown(function (e) {
            switch (e.which) {
                case 37:
                    jQuery("#cube").stop().animate({ left: '-=10' });
                    break;
                case 38:
                    jQuery("#cube").stop().animate({ top: '-=10' });
                    break;
                case 39:
                    jQuery("#cube").stop().animate({ left: '+=10' });
                    break;
                case 40:
                    jQuery("#cube").stop().animate({ top: '+=10' });
                    break;
            }
        });

        var space = false;
        jQuery(function () {
            jQuery(document).keydown(function (evt) {
                if (evt.keyCode == 32) {
                    space = true;
                }
            });
        });
        if (space == true) {
            jQuery(document).keydown(function (e) {
                switch (e.which) {
                    case 37:
                        jQuery("#cubetwo").stop().animate({ left: '-=10' });
                        break;
                    case 38:
                        jQuery("#cubetwo").stop().animate({ top: '-=10' });
                        break;
                    case 39:
                        jQuery("#cubetwo").stop().animate({ left: '+=10' });
                        break;
                    case 40:
                        jQuery("#cubetwo").stop().animate({ top: '+=10' });
                        break;
                }
            });
        }
</script>

Any help is much appreciated, thanks in advance. 

A:

You forget to include jquery in you jsfiddle.  And you can just use one keydown event to catch all the behaviors. 
When user press space, switch the target that will be moved. 
When arrow key is pressed, move the target. 
EDITED: 
If your expecting behavior is : Only when pressing space, the arrow key will affect to #cubetwo, otherwise move #cube, then you can add keyup event to achieve this, just use the commented out part in /* */ instead. 
As add another snippet will be too long for an answer, I've created a jsfiddle for you to test the second behavior, choose one that you expect. 

var space = false;
var target = space ?  jQuery("#cube") : jQuery("#cubetwo");
/*
var target = jQuery("#cube");
*/
jQuery(document).keydown(function (e) {
    switch (e.which) {
      case 37:
        target.stop().animate({ left: '-=10' });
      break;
      case 38:
        target.stop().animate({ top: '-=10' });
        break;
      case 39:
        target.stop().animate({ left: '+=10' });
        break;
      case 40:
        target.stop().animate({ top: '+=10' });
        break;
      case 32:
        // Swtich target. 
        space = ! space;
        target = space ?  jQuery("#cube") : jQuery("#cubetwo");
        /*
        target = jQuery("#cubetwo");
        */
      break;
  }
});

/*
jQuery(document).keyup(function (e) {
   if (e.which === 32) {
     target = jQuery("#cube");
   }
});
*/
#cube {
            height: 125px;
            width: 125px;
            border-style: solid;
            border-width: 2px;
            position: absolute;
            background-color: green;
            text-align: center;
            top: 0px;
            left: 0px;
        }
        #cubetwo {
            height: 125px;
            width: 125px;
            border-style: solid;
            border-width: 2px;
            position: absolute;
            background-color: blue;
            text-align: center;
            top: 0px;
            left: 700px;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div id="cube">
        Press arrow keys to move me
    </div>
    <div id="cubetwo">
        Hit space to activate me
    </div>
</body>

