Something

<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Consultant Accounts PoC</title>
    <style>
      OPTION.has_no_selected {
        color: red;
        font-weight: bold;
      }
      OPTION.has_selected {
        color: black;
	font-weight: bold;
      }
    </style>
  </head>

  <body>
   <form>
    <script>
      var acntToCon = new Array();
 
      acntToCon['1'] = [new Option("Contact1", 1), new Option("Contact2", 2)];
      acntToCon['2'] = [new Option("Contact3", 3), new Option("Contact4", 4)]; 
      acntToCon['3'] = [new Option("Contact Quux", 5)];

      function populateWithSelected(from, to, hash) {
        for (var i=0; i<from.options.length; i++) {
          var opt = from.options[i];

          if (opt.selected) {
            var catOpt = catify(opt);
           
            if (!categoryExists(catOpt, to)) {
              to.options[to.options.length] = catOpt;
           
              for (var n=0; n<hash[opt.value].length; n++) {
                hash[opt.value][n].setAttribute("catOptId", catOpt.id);
                to.options[to.options.length] = hash[opt.value][n];
              }
            }
          }
        }
      }

     
      function catify(opt) {
        var text = "_" + opt.text + "_";
        var catOpt = new Option(text, "cat_" + opt.value);
        catOpt.className = "has_no_selected";

        catOpt.id = catOpt.value + catOpt.text;
        return catOpt;
      }

      function categoryExists(catOpt, target) {
        for (var i=0; i<target.options.length; i++) {
          var opt = target.options[i];
          if (optionEquals(opt, catOpt)) {
            return true;
          }
        }
        return false;
      }

      function unpopulateWithSelected(source, target) {
        for (var i=0; i<source.options.length; i++) {
          var opt = source.options[i];

          if (opt.selected) {
            removeEntireCategory(catify(opt), target);
          }
        }
      }

      function updateCategories(target) {
        var hasSelected = false;

        for (var i=0; i<target.options.length; i++) {
	  var opt = target.options[i];
	  
	  if (opt.value.toString().indexOf("cat_") == 0) {
	    hasSelected = false;
	    opt.className = "has_no_selected";
	    opt.selected = false;
	  } else if (opt.selected) {
	    document.getElementById(opt.catOptId).className = "has_selected";	   
	  }	  
	}
      }


      function removeEntireCategory(catOpt, from) {
        var optsToDelete = new Array();
        var shouldDelete = false;
        
        for (var i=0; i<from.options.length; i++) {
          var opt = from.options[i];
       
          if (shouldDelete && (opt.value.toString().indexOf("cat_") == 0)) {
            shouldDelete = false;
          } else {
            shouldDelete = (shouldDelete || optionEquals(catOpt, opt));
          }

          if (shouldDelete) {
            optsToDelete[optsToDelete.length] = opt; 
          }
        }

        for (var i=(from.options.length - 1); i >= 0; i--) {
          if (containsOption(optsToDelete, from.options[i])) {
            from.options[i] = null;
          }
        }
      }

      function containsOption(array, opt) {
        for (var i=0; i<array.length; i++) {
          if (optionEquals(opt, array[i])) {
            return true;
          }
        }
        return false;
      }

      function optionEquals(opt1, opt2) {
        return (opt1.text == opt2.text) && (opt1.value && opt2.value);
      }

      function moveSelectedOptions(from, to) {
        for (var i=0; i<from.options.length; i++) {
          var opt = from.options[i];

          if (opt.selected) {
            to.options[to.options.length] = new Option(opt.text, opt.value);
          }
        }

        for (var i=(from.options.length - 1); i>=0; i--) {
          var opt = from.options[i];
          if (opt.selected) {
             from.options[i] = null;
          }
        }
      }
    </script>

    <table>
      <tr>
        <td>Available Acounts</td>
	<td></td>
	<td>Selected Accounts</td>
	<td>Contacts</td>
      </tr>
      <tr>
        <td>
	  <select id="accounts_available" multiple="true" size="7">
	    <option value="1">This is account 1</option>
	    <option value="2">This is account 2</option>
	    <option value="3">This is account 3</option>
	  </select>
	</td>
	<td valign="middle" align="center">
	  <button type="button" onclick="javascript:populateWithSelected(this.form['accounts_available'], this.form['contacts'], acntToCon); moveSelectedOptions(this.form['accounts_available'], this.form['accounts_selected']);">
	    --&gt;
	  </button>
	  <br/>
	  <button type="button" onclick="javascript:unpopulateWithSelected(this.form['accounts_selected'], this.form['contacts']); moveSelectedOptions(this.form['accounts_selected'], this.form['accounts_available'])">
	    &lt;--
	  </button>
	  </td>
	<td>
	  <select id="accounts_selected" multiple="multiple" size="7"></select>
	</td>
	<td>
	  <select id="contacts" multiple="multiple" size="7" 
	      onchange="javascript:updateCategories(this)">
	  </select>
	</td>
      </tr>
    </table>
   </form>
  </body>
</html>