SaveAndRemove

HTML

<h1 class="ui-widget-header">Products</h1>
<div id="myAccordion">
  <h3><a href="#">T-Shirts</a></h3>
  <div>
    <ul>
      <li class="item"><span class="closer">x</span>Lolcat Shirt</li>
      <li class="item"><span class="closer">x</span>Cheezeburger Shirt</li>
      <li class="item"><span class="closer">x</span>Buckit Shirt</li>
    </ul>
  </div>
  <h3><a href="#">Bags</a></h3>
  <div>
    <ul>
      <li class="item"><span class="closer">x</span>Zebra Striped</li>
      <li class="item"><span class="closer">x</span>Black Leather</li>
      <li class="item"><span class="closer">x</span>Alligator Leather</li>
    </ul>
  </div>
  <h3><a href="#">Gadgets</a></h3>
  <div>
    <ul>
      <li class="item"><span class="closer">x</span>iPhone</li>
      <li class="item"><span class="closer">x</span>iPod</li>
      <li class="item"><span class="closer">x</span>iPad</li>
    </ul>
  </div>
</div>
<form name="myForm" method="POST">
<div class='proc'><pre>
<h6> </h6><br /></pre>
  <div class="projLeader">
  <label>Box1:</label>   
    <div class="ui-widget-content">
        <ol>
          <li class="placeholder"></li>
        </ol>    
    </div>
  </div>
</div>
<br/>

<input type="submit" id="savebutton" class="button" value="Save" onclick="show_alert();"  />
<div id="output" ></div>
</form>

CSS

body {
  font-family: verdana;
  font-size: 12px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}
ol{list-style-type: none;}
.item { height:20px; width: 180px; margin:5px; padding:5px; border:1px solid gray; background-color: #cd8; position: relative; }
.item .closer { position: absolute; right: 5px; top: 2px; font: bold 14px arial; color: #666; padding: 1px 3px; line-height: 1; cursor: pointer; display: none;}
.item .closer:hover { color: #000; }


.placeholder { height: 30px; width: 195px; margin: 5px; background: #eee; border: 1px dashed #999; }
.placeholder .item { margin: 0; }
ol .item .closer { display: block; }

.highlight { border: 1px solid red;  background: #fff; }
.highlight .item { opacity: 0.3; }

.ui-draggable-dragging { z-index: 99; opacity: 1 !important; }

.dropClass {
  background-color: lightblue;
  padding-left: 10px;
  width: 180px;
  border: 1px solid black;
  border-radius: 8px;
  margin-bottom: 5px;
}

JavaScript

var itm = [];
   $( "#savebutton" ).click(function() { LISTOBJ.saveList(); });
   $("#myAccordion").accordion({heightStyle:"content", active: false, collapsible:true});
			$("#myAccordion li").draggable({
				appendTo: "body",
				helper: "clone", 
        start: function(ev, ui){ ui.helper.width($(this).width()); } 
			});
      
    $(".projLeader ol").droppable({ 
    tolerance: 'pointer', 
    hoverClass: 'highlight',
        drop: function(ev, ui)
        {
        	 var zz = ui.draggable.text()
	      	 var xyz = itm.includes(zz);
           if (xyz === false) 
           {
              var item = ui.draggable;
              if (!ui.draggable.closest('.placeholder').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
              //this.innerHTML = '';                                                        						// clean the placeholder
              item.addClass('dropClass').appendTo(this); 
              // append item to placeholder   
              //add to array
              itm.push(zz);
              var n = $(this).closest("div.proc").find(".dropClass").length;
              $(this).closest("div.proc").find("h6").text("Items Dropped: " + n + ".");
             
           }
           else 
           {
	        		alert('Name is Already Exist');
	      	 }

        }
    });
    $(".projLeader").on('click', '.closer', function(){
        var item = $(this).closest('.item');
        itm.splice(item);
        item.fadeTo(200, 0, function(){ item.remove(); })
    });
    
			var LISTOBJ = {
			saveList: function() {
				$(".projLeader").each(function() {
				  var listCSV = [];
				  $(this).find("li").each(function(){
					  listCSV.push($(this).text());
				  });
				  var values = listCSV.join(', ');
				  $("#output").append("<input type='text' style='width:350px;'' name='projLeader[]' value='"+values+"' />");
					  console.debug(listCSV);
				});
				}
			}
      
function show_alert() {
      var...