Stacking Div's

Keeps an array of messages which are shown as a floating set of div's stacked on the top left of the page, allows removing of messages and adding of new messages.

HTML

<table style="border: 1px solid black;">
  <tr height="500px">
    <td width="75px">
    </td>
    <td width="250px">
      This is the first column
      <input type="button" value="rebuild" id="rebuild" /><br/>
      <input type="button" value="add" id="add" />
    </td>
    <td width="250px">
      This is the main column<br/>
      <select id="rem"></select><br/>
      <input type="button" value="remove" id="remove" />
    </td>
  </tr>
</table>
<div id="floating_messages"></div>

CSS

#floating_messages {
  border: 1px blue solid;
  padding-bottom: 2px;
  top: 20px;
  left: 20px;
  z-index: 1;
  position: fixed;
}

.msgID {
  size: 1em;
  color: grey;
}

.message {
  border: 1px red solid;
  margin-top: 2px;
  margin-left: 2px;
  margin-right: 2px;
  padding: 2px;
}

JavaScript

var messages = [];
var messagesID = 0;

function addMessage(title, message, link) {
  messagesID++;
  messages.push({
    title: title,
    msg: message,
    link: link,
    id: messagesID
  });
  var newDIV = buildDiv(title, message, link, messagesID);
  $('#floating_messages').append(newDIV);

  // Won't be needed:
  $('#rem').append('<option value="' + messagesID + '" id="' + messagesID + '">' + messagesID + '</option>');
}

function buildDiv(title, message, link, id) {
  var newDIV = '<a href="' + link + '"><div id="' + id + '" class="message"><b>' + title + '</b> <span class="msgID">ID: ' + id + '</span><br/>' + message + '</div></a>';
  return newDIV;
}

function rebuildMessages() {
  $('#floating_messages').hide('slow').empty();
  if (messages.length != 0) {
    $('#floating_messages').show('slow');
    $.each(messages, function(i, v) {
      var newDIV = buildDiv(v.title, v.msg, v.link, v.id);
      $('#floating_messages').append(newDIV);
      $('#msg' + v.id).show('slow');
    });
  }
}

function removeMessages(id) {
  messages = $.grep(messages, function(value) {
    if (value.id != id) {
      return value;
    }
    // Wont be needed:
    else {
      $('#rem > option#' + id).remove();
    }
  });
  rebuildMessages();
}

// Not part of the plugin:

$('#rebuild').click(function() {
  rebuildMessages();
});

$('#remove').click(function() {
  var id = $('#rem').val();
  removeMessages(id);
});

$('#add').click(function() {
  addMessage("One", "First new message", "#");
});

addMessage("Two", "Second new message", "#");
addMessage("Three", "Third new message", "#");
addMessage("Four", "Fourth new message", "#");