'javascript moves both objects. Why?

I want two separate objects on a page to be moveable by the user - mouse click and drag. I'm having all sorts of problems achieving this. the following test code baffles me. Both objects get moved and I cannot work out why.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Mouse move</title>
<meta http-equiv="Content-Type"  content="text/html; charset=windows-1252">
<script language="JavaScript" type="text/JavaScript">
var cursorInPopUp           = true;
var offsetx;
var offsety;
var nowX;
var nowY;
function initialiseFloating ()
{
  document.onmousedown  = PrepareFloatMove;
  document.onmouseup    = Function("cursorInPopUp=false");
}
function PrepareFloatMove()
{
  if (event.target.id!="bar") return

  offsetx               = event.clientX
  offsety               = event.clientY
  nowX              = parseInt(document.getElementById("container").offsetLeft);
  nowY              = parseInt(document.getElementById("container").offsetTop);
  cursorInPopUp         = true;
  document.onmousemove      = moveFloat;
}
function moveFloat()
{
  if (!cursorInPopUp)
  {
    document.body.style.cursor = 'default';
    return;
  }
  document.body.style.cursor            = 'move';
  document.getElementById("container").style.left   = nowX+event.clientX-offsetx
  document.getElementById("container").style.top    = nowY+event.clientY-offsety
  return false;
}
</script>
<style>
.container
{
  position  :   relative;
  top:0px;
  left;15%;
  width:60%;
  height:60%;
  border:2px solid black;
}
.bar
{
  position:relative;
  top:0px;
  width:100%;
  height:10%;
  border:2px solid red;
  cursor:pointer;
}
.contents
{
  position:relative;
  top:0px;
  width:100%;
  height:88%;
  border:2px solid green;
}
.container2
{
  position  :   relative;
  top:0px;
  left;75%;
  width:60%;
  height:60%;
  border:2px solid pink;
}
.bar2
{
  position:relative;
  top:0px;
  width:100%;
  height:10%;
  border:2px solid blue;
  cursor:pointer;
}
.contents2
{
  position:relative;
  top:0px;
  width:100%;
  height:88%;
  border:2px solid yellow;
}
</style>
</head>
<body background="black">
<div id="container" class="container">
  <div  id="bar" class="bar">
  </div>
  <div   id="contents"  class="contents">
  </div>
<div>


<div id="container2" class="container2">
  <div  id="bar2" class="bar2">
  </div>
  <div   id="contents2"  class="contents2">
  </div>
<div>
<script>    initialiseFloating('container');</script>
</body>
</html>

Any ideas will be gratefully received I don't know what other detail to add. Both areas are the same but belong to different classes and have different IDs. the IDs of the second area do not appear in the javascript

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'javascript moves both objects. Why?

Sources

Related Questions