Hi, I have a page like this

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <!-- http://www.sitepoint.com/forums/showthread.php?1173132-Get-data-from-2-comboboxes-and-add-to-a-list -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    
    <style>
      #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
      #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
      html>body #sortable li { height: 1.5em; line-height: 1.2em; }
      .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
      div{ padding: 10px; }
	  
	  #addButton
	  {
		  	background-image:url(add_btn.png);
		 	width:18px;
			height:18px;
			
	  }	  
	  
    </style>
  </head>
  
  <body>
    <div>
      <select class="category-select" name="localprojects">
        <option value="1">mca 1</option>
        <option value="2">mca 2</option>
      </select>
      <===>
      <select class="category-select" name="remoteprojects">
        <option value="z1">zoho 1</option>
        <option value="z2">zoho 2</option>
      </select> 
         
      <a id="addButton" href="#" style="display: inline-block;"></a>
    </div>
    
    <ul id="sortable">

    </ul>
    
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
      function elementAlreadyExists(val){
        var elementAlreadyExists = false;
        $("#sortable > li").each(function(){
          var currVal = $(this).data("value");
          if(currVal === val){
            elementAlreadyExists = true;
            return;
          }
        });
        return elementAlreadyExists;
      }
      
      $("#sortable").sortable({ placeholder: "ui-state-highlight" }).disableSelection();
      $("#addButton").on("click", function(){
        var s1 = $(".category-select").eq(0).find("option:selected"),
            s2 = $(".category-select").eq(1).find("option:selected"),
            newText = s1.text() + " - " + s2.text();
            newValue = s1.val() + "-" + s2.val();
            listElement = $("<li>", {class: "ui-state-default", text: newText, 'data-value': newValue});
        
        if (elementAlreadyExists(newValue)){
          alert("Already Exists!");
        } else {
          $("#sortable").append(listElement);
        }
      });
    </script>
  </body>
</html>
Now I want create a form just like that.

Here is the code of the function test_form

PHP Code:
   $css "
      #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
      #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } 
      html>body #sortable li { height: 1.5em; line-height: 1.2em; } 
      .ui-state-highlight { height: 1.5em; line-height: 1.2em; } 
      div{ padding: 10px; }
      
      #addButton
      {
              background-image:url(add_btn.png);
             width:18px;
            height:18px;
            
      }    
"
;
    
    
$js "
      function elementAlreadyExists(val){
        var elementAlreadyExists = false;
        $(\"#sortable > li\").each(function(){
          var currVal = $(this).data(\"value\");
          if(currVal === val){
            elementAlreadyExists = true;
            return;
          }
        });
        return elementAlreadyExists;
      }
      
      $(\"#sortable\").sortable({ placeholder: \"ui-state-highlight\" }).disableSelection();
      $(\"#addButton\").on(\"click\", function(){
        var s1 = $(\".category-select\").eq(0).find(\"option:selected\"),
            s2 = $(\".category-select\").eq(1).find(\"option:selected\"),
            newText = s1.text() + \" - \" + s2.text();
            newValue = s1.val() + \"-\" + s2.val();
            listElement = $(\"<li>\", {class: \"ui-state-default\", text: newText, 'data-value': newValue});
        
        if (elementAlreadyExists(newValue)){
          alert(\"Already Exists!\");
        } else {
          $(\"#sortable\").append(listElement);
        }
      });        
"
;
    
    
drupal_add_css("http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css", array('type' => 'external''group' => CSS_DEFAULT));    
    
drupal_add_css($css, array('type' => 'inline'));

    
drupal_add_js("http://code.jquery.com/jquery-1.9.1.js", array('type' => 'external''scope' => 'footer'));
    
drupal_add_js("http://code.jquery.com/ui/1.10.3/jquery-ui.js", array('type' => 'external''scope' => 'footer'));
    
//drupal_add_js($module_path . $js_dir . "/list.js", array('type' => 'inline', 'scope' => 'footer'));       
    
drupal_add_js($js, array('type' => 'inline''scope' => 'footer''group' => JS_LIBRARY));       

    
$form['local_projects'] = array(    
            
'#type' => 'select',
            
'#title' => t('Local Projects'),
            
'#options' => $local_projects//local_projects contains many key=>value pairs
            //'#default_value' => $category['selected'],
            
'#description' => t('Choose a Local project'),
            
'#attributes' => array('class' => array('category-select')),
        );  
    
    
$form['remote_projects'] = array(    
        
'#type' => 'select',
        
'#title' => t('Remote Projects'),
        
'#options' => $remote_projects//remote_projects contains many key=>value pairs
        //'#default_value' => $category['selected'],
        
'#description' => t('Choose a Remote project'),
        
'#attributes' => array('class' => array('category-select')),
    ); 

    
$form['addButton'] = array(
        
'#attributes' => array('style' => 'display: inline-block;'),
        
'#type' => 'link',
        
'#title' => t(''),
        
'#href' => "#",
        
'#id' => 'addButton',                   
    );
    
    
$form['sortable'] = array(
        
'#id' => 'sortable',
        
'#type' => '#ul',        
    );    
            
    return 
system_settings_form($form); 
5 issues occurred:
- The style code is wrapped in CDATA tag.
- The js code is wrapped in CDATA tag.
- The add button image (file add_btn.png) can not show, despite it already existing in both the folders of the module and the site's root directory.
- The comboboxes display in 2 different rows, instead of only one row.
- The hash character of the add button image's href property turns to "%23" when the page loads.

Please tell me what should I do to fix these problems? What change should I make to the code? It seems to me that my css and js script could not work.