Creating an InfoCard/Info Box with CSS, Javascript, HTML

Question

I have been tasked with creating a series of 8 boxes that load automatically with just a name and a photo in them. When they are hovered over an x appears, and it can be clicked to delete the box. I also have to be able to add new boxes. Currently I have it set up with 2 fields one to take the name and the photo url.

I am having a few problems, I am able to create a box with border, but if I add text or a name the box disappears, and leaves me with just a name. Also, I can import the picture to the page directly, but can't add the name and still I can't create the box.

Can anyone point me in the right direction to accomplish this?

Here is my HTML

The first part here pulls a photo in, and just a photo. The second part creates a box on load, and is supposed to have a name and photo. At present I took out the img line, and am just trying to get a name in the box, and then I'll go back to the image.

  <script type="text/javascript">
    document.getElementById('btn').onclick = function() {
        var val = document.getElementById('imagename').value,
            src = "" + val +'.png',
            img = document.createElement('img');

        img.src = src;
        document.body.appendChild(img);
    };
</script>

  <hr />
<div class="boxed">
    <name>William Finley </name>
</div>

And here is my CSS

.boxed{
border: 3px black;
width:150px;
}

.name
{    
font-weight:bold;    
position:relative;    
z-index:100; /*greater than details, to still appear in card*/
}
.card img
{
width:70px;    
float:right;
margin-top:-1em;
}