Using jquery to append / remove divs for a form

I have an autocomplete input field, and right now, in order to store multiple values, you need to separate each one with a comma. I'm trying to add an "Add" button so that after each selected value, the user clicks on it and that value is removed from the input box and stored in another input field.

So, for example, here are some potential options:

Array(
  [500] => 'Firefly', 
  [501] => 'Dollhouse',
  [502] => 'Serenity',
  [503] => 'Wonder Boys',
  [504] => 'Buffy the Vampire Slayer',
  [505] => 'Angel'
)

If the user starts typing "F" and selects "Firefly" from the dropdown box, I want to remove "Firefly" from the "yo-value" input box and then in the "dropbox" table, I want to append a row to the table:

<tr><td><input type="text" name="field_yo2[value][500]" value="Firefly" /></td></tr>

Am I explaining this clearly? I feel like I'm not... I can do this with jquery, right?

<!-- this is the input field where the user begins typing their selection -->
<input type="text" class="form-text" value="" id="yo-value" name="field_yo[value]"  autocomplete="OFF">

<input type="hidden" disabled="disabled" value="/ct/autocomplete/field_yo" id="edit-field-yo-value-autocomplete" class="autocomplete autocomplete-processed"&开发者_StackOverflow中文版gt;

<input value="Add" class="form-submit add-to-yo" name="manual-add" id="manual-add-button">

<div class="dropbox">
 <table>
  <caption class="dropbox-title">YO Selection(s):</caption>
   <tbody>
    <tr class="dropbox-entry first last dropbox-is-empty">
    <td>  </td>
    </tr>
   </tbody>
 </table>
</div>