Multiple choix en jquery

Bonjour, j vais essayer d'être claire

j'ai ce script en jquery, mais vous allez me dire c'est trop bordel et trop long etc..

c'est pour celà, je viens vous voir si quelqu'un peut m'aidé à refaire un code très simple

voila le code jquery

// JavaScript Document

//Toggle de la liste
var obj, selectVal = {},index_parent, strings = {}, target;
$(".multiple-choix").on("click", ".hida1", function() {
    $(".mutliSelect1 ul").not($(".mutliSelect1 ul", $(this).parent())).slideUp('500');
    $(".mutliSelect1 ul", $(this).parent()).slideToggle('500');
    target = $(this).parent();
  })
  //Reporter valeur directement après on "click"
  .on("change", "input[type='checkbox']", function() {
    //index_parent = $(this).parents("dl").index(".multiple-choix");
    obj = $(this).parents('.multiple-choix').find(".hida1 span"); 			var iterator = parseInt($(this).parents("dl").index(".multiple-choix"));
   
     
    if(strings[iterator]==undefined)
			strings[iterator] = {};
    if(selectVal[iterator]==undefined)
    	selectVal[iterator] = "";
     
    $(this).each(function() {
     //pour chaque checkbox dont la valeur est true
      if ($(this).is(':checked')) {
 				strings[iterator][$(this).val()] = $(this).val();
      }else{
      	delete(strings[iterator][$(this).val()]);
      }
			
       if(selectVal[iterator]=="")
    		selectVal[iterator] = obj.text();
      
     	var default_text = selectVal[iterator];
      if(Object.keys(strings[iterator]).length < 1){
      	strings[iterator][default_text] = default_text;
      }else{
      	delete(strings[iterator][default_text]);
      }
      
      var result = joinObj(sortObj(strings[iterator]),", ");
      var optionnal_panel = target.find("p.choix-membre");
      var optionnal_panel2 = $("p.choix-membre[data-for-select=\"" + default_text + "\"");
      if(optionnal_panel.length){
      	obj.text(default_text);
        optionnal_panel.text(result);
     	}else if(optionnal_panel2.length){
      	obj.text(default_text);
        optionnal_panel2.text(result);
      }else
      	obj.text(result);
      /*console.log(" index_parent :" + index_parent + " nodeName :" + obj.get(0).nodeName + " selectVal :" + selectVal);*/
 $(this).parents('.multiple-choix').trigger("value_changed",[result]);
    });
 		
 		
  });
  
  
  $(".choix").each(function() {
  	var li = $(this).find("li");
    var name = $(this).data("name");
    li.each(function(){
    	$(this).css("cursor","pointer");
      $(this).prepend("<input type=\"checkbox\" name=\""+name+"\" value=\""+$(this).text()+"\" style=\"display:none;\" />");
    });
  });
  $(".choix").on("click", ".hida1", function() {

    $(".mutliSelect1 ul").not($(".mutliSelect1 ul", $(this).parent())).slideUp('500');
    $(".mutliSelect1 ul", $(this).parent()).slideToggle('500');
    target = $(this).parent();
  })

  $('.choix').on("click","li", function(){
  console.log("j");
  	  var name = $(this).parents('.choix').data("name");
      var val = $(this).text();
      var hida = $(this).parents('.choix').find(".hida1");
     	var checkbox = $(this).find("input[name=\""+name+"\"][value=\""+val+"\"][type=checkbox]");
      console.log(checkbox);
      hida.text(val);
      
      $(this).find("input[type=checkbox]").each(function(){
      	$(this).prop("checked",false);
      });
      
      checkbox.prop("checked",true);
      hida.trigger("click");
  });



$(".multiple-choix").on("value_changed",function(e,value){
	$(".choix-membre").text(value);
});




function joinObj(a, delemiter) {
  var out = []; 
  for(var key in a){
  	out.push(a[key]);
  }
  return out.join(delemiter);
}

function sortObj(obj) {
    "use strict";

    function Obj2Array(obj) {
        var newObj = [];
        for (var key in obj) {
            if (!obj.hasOwnProperty(key)) return;
            var value = [key, obj[key]];
            newObj.push(value);
        }
        return newObj;
    }

    var sortedArray = Obj2Array(obj).sort(function(a, b) {
        if (a[1] < b[1]) return -1;
        if (a[1] > b[1]) return 1;
        return 0;
    });


    function recreateSortedObject(targ) {
        var sortedObj = {};
        for (var i = 0; i < targ.length; i++) {
            sortedObj[targ[i][0]] = targ[i][1];
        }
        return sortedObj;
    }
    return recreateSortedObject(sortedArray);
}	

	  <div class="global-select-normal choix select1">
	  <span class="hida1 icon-select">choisit un chiffre</span>
	  <nav class="mutliSelect1"><ul>
	  <li>1</li>
	  <li>2</li>
	  <li>3</li>
	  <li>4</li>
	  <li>5</li>
	  </nav></div></div>

je vous donne une explication

le code html qui fonctionne très bien et ca consiste si on choisis par exemple le chiffre 4 le chiffre se met automatiquement

<span class="hida1 icon-select">choisit un chiffre</span>

ensuite j'aimerais bien avec le même code html

	  <div class="global-select-normal choix select1">
	  <span class="hida1 icon-select">choisit un chiffre</span>
	  <nav class="mutliSelect1"><ul>
	  <li>1</li>
	  <li>2</li>
	  <li>3</li>
	  <li>4</li>
	  <li>5</li>
	  </nav></div></div>

c'est qu'on puisse cliquer sur 2 et 3 et qu'il se mette une couleur pour dire qu'on choisit

par exemple si on choisit le chiffre 1 et 3

ça donnera comme ça

	  <div class="global-select-normal choix select1">
	  <span class="hida1 icon-select">1, 3</span>
	  <nav class="mutliSelect1"><ul>
	  <li class="couleurchoisit>1</li>
	  <li>2</li>
	  <li class="couleurchoisit>3</li>
	  <li>4</li>
	  <li>5</li>
	  </nav></div></div>

si quelqu'un peut m'aidé merci de votre aide