Hope this is the working you wanted
The p#list was outside #snaptarget hence the newly created items were
placed outside. Bring the p tag inside #snaptarget
<div id="snaptarget" class="ui-widget-header">
<p id="list"></p>
</div>
The below js code was setting float to spans with ids but all these
spans had another span as a wrapper hence the floats never worked as

What you want is to gather together all the DOM nodes with the
specified class, like so (using your IE8-compatible
getElementsByClassName function):
var els = getElementsByClassName(document.body,'OUTBPC');
then you want to iterate over them, setting each ones innerHTML
property:
for (var i = 0, len = els.length; i < len; i += 1) {
els[i].innerHTML = " " + name;
}