Drag and Drop Issue

by pjamesnorris25

HTML

<div name="possessions_initial">
  <span id="possession_Shotgun_Shell" class="possession_initial">
    <img id="Shotgun_Shell_2" class="zoom_small card" src="https://i.postimg.cc/N28LZpPT/Shotgun-Shell.gif" draggable="true" ondragstart="drag(event)"><br>
  </span>
  <span id="possession_Shotgun" class="possession_initial">
    <img id="Single_Barrel_Shotgun_1" class="zoom_small card" src="https://i.postimg.cc/1XfwzSqn/Single-Barrel-Shotgun.gif" draggable="true" ondragstart="drag(event)"><br>
  </span>
</div>

<div style="border:1px black solid; height:700px; position:absolute;">
  <div id="figure_solo" style="border:1px black solid; margin-left:auto; margin-right:auto; ">
    <img src="https://i.postimg.cc/8cJrhVm2/figure.gif" height="700">
  </div>
  <span id="rightshoulder-span" style="border:black solid 1px; left:4px; height:30px; width:195px; overflow:hidden; position:absolute; top:96px; " ondrop="drop(event)" ondragover="allowDrop(event)"></span>
  <ul id="rightshoulder-ul" style="left:4px; position:absolute; top:126px; z-index:101; "></ul>
  <span id="leftshoulder-span" style="border:black solid 1px; left:387px; height:30px; width:173px; overflow:hidden; position:absolute; top:96px; " ondrop="drop(event)" ondragover="allowDrop(event)"></span>
  <span id="leftshoulder-span" style="border:black solid 1px; left:387px; height:30px; width:173px; overflow:hidden; position:absolute; top:96px; " ondrop="drop(event)" ondragover="allowDrop(event)"></span>
  <ul id="leftshoulder-ul" style="left:387px; position:absolute; top:126px; z-index:101; "></ul>
</div><!-- id="figure_solo" -->

CSS

div.possession_initial {
		  border: black 1px solid;
		  height: 154px;
		  width: 88px;
		}

		span.possession_initial {
		  display: inline-block;
		}

		.tooltip {
		  border: none;
		  cursor: pointer;
		  display: inline-block;
		  position: relative;
		}

		.tooltipimage {
		  position: absolute;
		  visibility: hidden;
		  z-index: 101;
		}

		.tooltip:hover .tooltipimage {
		  margin-top: -75px;
		  visibility: visible;
		}

		.tooltiptext {
		  color: green;
		  text-align: center;
		  position: absolute;
		  visibility: hidden;
		  width: 120px;
		  z-index: 1;
		}

		.tooltip:hover .tooltiptext {
		  margin-left: -70px;
		  margin-top: 15px;
		  visibility: visible;
		}

		ul {
		  list-style-type: none;
		  margin: 0px 0px 0px 15px;
		  padding: 0px;
		  text-align: left;
		}

		.zoom_small {
		  transition: transform .2s;
		  width: 88px;
		}

		.zoom_small:hover {
		  transform: scale(2.0);
		  z-index: 999;
		}

JavaScript

var arr_space = {};
arr_space["Shotgun Shell"] = {}
arr_space["Shotgun Shell"]["space"] = 0;
arr_space["Shotgun Shell"]["weight"] = 2;
arr_space["Single Barrel Shotgun"] = {}
arr_space["Single Barrel Shotgun"]["space"] = 6;
arr_space["Single Barrel Shotgun"]["weight"] = 100;

function addContentsSpan(str_possession) {
  bool_debug = true;

  var str_item = str_possession.replace(/[0-9]/g, "").replace(/_/g, " ").slice(0, -(" ".length));
  var str_possession_li = str_possession + "-li";
  var str_possession_span = str_possession + "-span";

  if (bool_debug) {
    alert(str_item + " is a container with space = " + arr_space[str_item]["space"] + " and weight = " + arr_space[str_item]["weight"] + "." + "\n" + "str_possession_span = " + str_possession_span);
  } // function addContentsSpan(str_possession)

  var ele_span = document.getElementById(str_possession_span);
  ele_span.setAttribute("id", str_possession_span);
  ele_span.setAttribute("ondrop", "drop(event)");
  ele_span.setAttribute("ondragover", "allowDrop(event)");
  ele_span.setAttribute("style", "border:1px solid black;");
  var ele_li = document.getElementById(str_possession_li);

  var ele_contents_span = document.createElement("span");
  ele_contents_span.setAttribute("id", (str_possession + "-contents-span"));
  ele_contents_span.setAttribute("ondrop", "drop(event)");
  ele_contents_span.setAttribute("ondragover", "allowDrop(event)");
  ele_li.appendChild(ele_contents_span);

  var ele_ul = document.createElement("ul");
  ele_ul.setAttribute("id", (str_possession + "-ul"));
  ele_li.appendChild(ele_ul);
} // function addContainerSpan(str_possession_li)

function allowDrop(eve) {
  eve.preventDefault();
} // function allowDrop(eve)

function drag(eve) {
  eve.dataTransfer.setData("text", eve.target.id);
} // function drag(eve) 

function drop(eve) {
  bool_debug = true;

  // drop the item in the container			
  var str_possession = eve.dataTransfer.getData("text");
  var str_item =...