Clear rect on click acting funny.

https://jsfiddle.net/Static_Cloud/0oc9L2nd/

What I'm trying to accomplish:

I want each square to disappear and get added to my 'inventory':

(When I create the squares and add them to the items list (list of items already in the room)).

var item1 = new item('Rock', ctx);
item1.drawItem(50, 50);
var item2 = new item('Paper', ctx);
item2.drawItem(150, 200);
var item3 = new item('Scissors', ctx);
item3.drawItem(200, 250);

var items = [item1, item2, item3];
var inventory = [];

(When they get added to my inventory)

function mouseClickHandler(event) {
  click.innerHTML = mouseX + ' | ' + mouseY;
  for (var i = 0; i < items.length; i++) {
  	if (mouseX > items[i].x & mouseY > items[i].y &
  		mouseX < items[i].x + items[i].width & mouseY < items[i].y + items[i].height) {
      inventory.push(items[i].name);
      inv.innerHTML = inventory;
      items[i].removeItem();
      items.splice(i);
      break;
    }
}
}

What I'm getting:

When I try clicking on any of the squares, only one gets added and the others do nothing on click. Sometimes, if done in a specific order, they all get added, but there is still the problem of them doing nothing on click.