Как получить все выбранные опции текстовой формы multi select Используя Javascript для Generate Code?

Question

У меня проблема, когда я выбираю несколько опций, он не регистрирует все выбранные значения, только первое.

Выбранный кратный передаст свои значения через JS в окончание "+ rasgos + ». В этом случае я хотел бы, чтобы значения появлялись при нажатии кнопки, после чего следовали бы запятые, например: «Robusto, Ágil, Feo».

function generar(){

  var keko = document.formu.keko.value;
  var dd = document.formu.dd.value;
  var mm = document.formu.mm.value;
  var aaaa = document.formu.aaaa.value;
	var nombre = document.formu.nombre.value;
  var edad = document.formu.edad.value;
  var afi = document.formu.afi.value;
  var origen = document.formu.origen.value;
  var religion = document.formu.religion.value;
  var rasgos = document.formu.rasgos.value;
  var positivos = document.formu.positivos.value;
  var negativos = document.formu.negativos.value;
  var total = document.formu.total.value;
  var dinero = document.formu.dinero.value;
  var clasesocial = document.formu.clasesocial.value;
  var fisico = document.formu.fisico.value;
  var img = document.formu.img.value;
  var personalidad = document.formu.personalidad.value;
  var historia = document.formu.historia.value;
	var alineamiento = document.formu.alineamiento.value;
	var puntosali = document.formu.puntosali.value;  


	var code = "<div class='gotrpg'><div class='imgficha'><div style='padding-top: 70px;'><div class='gotrpgnombre'>"+nombre+"</div></div></div><div class='gotrpgavatar' style='background: url("+img+") center'></div><div class='gotrpgfecha'>"+dd+"/"+mm+"/"+aaaa+"</div><div class='gotrpgkeko'>"+keko+"</div><div class='gotrpgcaja'><div class='gotrpginfope'>Información del Personaje</div><div class='gotrpgcaja1'><table><tbody><tr><td><div class='gotrpgcaja1-1'><div class='gotrpgcaja1-1t'>Datos del Personaje</div><div class='gotrpgcaja1-2'><b>Nombre del personaje -</b>"+nombre+"<br><b>Edad -</b>"+edad+"<br><b>Rango -</b> X<br><b>Nivel -</b> X<br><b>Afiliación -</b> "+afi+"<br><b>Lugar de origen -</b> "+origen+"<br><b>Religión -</b> "+religion+"<br><b>Honor -</b> X<br><b>Puntos de Honor [PH] -</b> 0/0/0<br><b>Rasgos -</b> "+rasgos+"<br><b>Puntos de Rasgos [PR] -</b> "+positivos+"/"+negativos+"/"+total+"<br><b>Puntos de Experiencia [PX] -</b> 0/0/0<br><b>Dinero -</b> "+dinero+"<br><b>Oficio -</b> X<br><b>Clase Social -</b> "+clasesocial+"</div></div></td><td><div class='gotrpgcaja1-1'><div class='gotrpgcaja1-1t'>Sobre el Personaje</div><div class='gotrpgcaja1-2'><b>Físico -</b> "+fisico+"<br><br><b>Personalidad -</b> "+personalidad+"<br><br><b>Historia - </b> "+historia+"<br><br><b>Alineamiento -</b> "+alineamiento+"<br><br><b>Puntos de Alineamiento [PA] - </b> "+puntosali+"</div></div></td></tr></tbody></table></div><div class='gotrpgstats1'><div class='gotrpgstatstitulo'>Stats de Combate</div><table cellpadding='10'><tbody><tr><td></td><td><select class='gotrpgselect'><option value=''>FUE: 50</option><option value=''>Base: 50</option></select><select class='gotrpgselect'><option value=''>RES: 0</option><option value=''>Base: 0</option></select><select class='gotrpgselect'><option value=''>AGI: 5</option><option value=''>Base: 5</option></select><select class='gotrpgselect'><option value=''>VIT: 200</option><option value=''>Base: 200</option></select></td></tr></tbody></table></div><div class='gotrpginventorycaja'><table><tbody><tr><td><div class='gotrpginventory'><div class='gotrpgcaja1-1t'>Equipamiento</div><div class='gotrpginventorytexto'><b>Mano derecha -</b><br><b>Mano izquierda -</b><br><b>Torso -</b><br><b>Cabeza -</b><br><b>Piernas -</b><br><b>Pies -</b><br><b>Accesorio -</b><br><b>Extra -</b></div></div></td><td><div class='gotrpginventory'><div class='gotrpgcaja1-1t'>Almacenaje</div><div class='gotrpginventorytexto'></div></div></td></tr></tbody></table></div><div class='gotrpgstats2'><div class='gotrpgstatstitulo1'>Stats de Interacción</div><table cellpadding='10'><tbody><tr><td><select class='gotrpgselect'><option value=''>INT: 100</option><option value=''>Base: 100</option></select><select class='gotrpgselect'><option value=''>CAR: 25</option><option value=''>Base: 25</option></select><select class='gotrpgselect'><option value=''>PERS: 0</option><option value=''>Base: 0</option></select><select class='gotrpgselect'><option value=''>BELL: 5</option><option value=''>Base: 5</option></select></td></tr></tbody></table></div><div class='gotrpgregistro'><div class='slideshow new_version'><div class='active get_panel'><label class='for_pan1'>Registro</label><label class='for_pan2'>Registro Microeconómico</label></div><div class='slides'><div class='mask'><div class='slide_content' style='width: 500%; height: 220px'><div class='pannello p1' style='width: 20%;'><div class='gotrpgregistro1'><div class='gotrpgregistro2'><b>["+dd+"/"+mm+"/"+aaaa+"] -</b> Inicio en Game of Thrones RPG</div></div></div><div class='pannello p2' style='width: 20%;'><div class='gotrpgregistro1'><div class='gotrpgregistro2'><b>["+dd+"/"+mm+"/"+aaaa+"]</b> - "+nombre+" obtiene  "+dinero+"</div></div></div></div></div></div></div></div></div></div>";

	document.getElementById("code").innerHTML = code;
}




























const select = document.querySelector('.multipleChosen');
const positivos = document.getElementById('positivos');
const negativos = document.querySelector('input[name=negativos]');
const total = document.querySelector('input[name=total]');
const errorMessage = document.getElementById('error-message');

$(document).ready(function() {
  //Chosen
  $(select).chosen({
    placeholder_text_multiple: "Rasgos" //placeholder
  }).change(calculate);
  calculate();
})

function calculate() {
  setTimeout(() => { // give the DOM time to update
    let choices = [...document.querySelectorAll('.search-choice span')]
      .map(choice => document.querySelector(`option[value='${choice.innerHTML}']`));

    let positiveChoicesTotalCost = choices
      .filter(choice => choice.dataset.cost < 0)
      .reduce((sum, choice) => sum + Number(choice.dataset.cost), 10);

    let negativeChoicesTotalCost = choices
      .filter(choice => choice.dataset.cost > 0)
      .reduce((sum, choice) => sum + Number(choice.dataset.cost), 0);

    let z = positiveChoicesTotalCost + negativeChoicesTotalCost;

    positivos.value = positiveChoicesTotalCost;
    negativos.value = negativeChoicesTotalCost;
    total.value = z;
    
    if (z < 0) {
      total.classList.add('error');
      errorMessage.classList.add('show');
    } 
    
    else {
      total.classList.remove('error');
      errorMessage.classList.remove('show');
    }
  }, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"> 
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"> 
</script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css"><select name="rasgos" class="multipleChosen rasgos" multiple="true">
  <optgroup label="Positivos">
    <option value="Robusto" data-cost="-5">Robusto</option>
    <option value="Musculoso" data-cost="-5">Musculoso</option>
    <option value="Ágil" data-cost="-5">Ágil</option>
    <option value="Con reflejos" data-cost="-6">Con reflejos</option>
    <option value="Preciso" data-cost="-6">Preciso</option>
    <option value="Afortunado" data-cost="-6">Afortunado</option>
    <option value="Atento" data-cost="-4">Atento</option>
    <option value="Agraciado" data-cost="-5">Agraciado</option>
    <option value="Vivaz" data-cost="-4">Vivaz</option>
    <option value="Culto" data-cost="-4">Culto</option>
    <option value="Noble" data-cost="-4">Noble</option>
    <option value="Líder" data-cost="-6">Líder</option>
    <option value="Defensor" data-cost="-6">Defensor</option>
    <option value="Precavido" data-cost="-6">Precavido</option>
    <option value="Orador" data-cost="-5">Orador</option>
    <option value="Sagaz" data-cost="-5">Sagaz</option>
    <option value="Aprendizaje rápido" data-cost="-6">Aprendizaje rápido</option>
    <option value="Crematomano" data-cost="-4">Crematomano</option>
    <option value="Regateador" data-cost="-4">Regateador</option>
    <option value="Domador" data-cost="-5">Domador</option>
  </optgroup>
  <optgroup label="Negativos">
    <option value="En los huesos" data-cost="4">En los huesos</option>
    <option value="Débil" data-cost="5">Débil</option>
    <option value="Lento" data-cost="5">Lento</option>
    <option value="Vago" data-cost="3">Vago</option>
    <option value="Glotón" data-cost="3">Glotón</option>
    <option value="Sin reflejos" data-cost="6">Sin reflejos</option>
    <option value="Sin puntería" data-cost="6">Sin puntería</option>
    <option value="Torpe" data-cost="6">Torpe</option>
    <option value="Dócil" data-cost="6">Dócil</option>
    <option value="Honesto" data-cost="5">Honesto</option>
    <option value="Obstuto" data-cost="3">Obstuto</option>
    <option value="Mal oído" data-cost="4">Mal oído</option>
    <option value="Feo" data-cost="3">Feo</option>
    <option value="Estéril" data-cost="3">Estéril</option>
    <option value="Aprendizaje lento" data-cost="6">Aprendizaje lento</option>
    <option value="Testarudo" data-cost="4">Testarudo</option>
    <option value="Tartamudo" data-cost="3">Tartamudo</option>
    <option value="Disoluto" data-cost="3">Disoluto</option>
    <option value="Ceguera" data-cost="7">Ceguera</option>
    <option value="Enfermizo" data-cost="3">Enfermizo</option>
  </optgroup>
</select>
    <div class="puntosrasgos"><div class="col-six"><div class="titulopuntosrasgos">Puntos de Rasgos [PR]</div></div><div class="col-four"><div class="input-group">
<div class="col-rasgos"><p>
  <label for="positivos" name="positivos"></label>
  <input id="positivos" type="text" disabled="" name="positivos" class="alin" value="" placeholder="Positivos" /></p></div><div class="col-rasgos"><p><label for="negativos" name="negativos"></label>
  <input id="negativos" type="text" disabled="" name="negativos" class="alin" value="" placeholder="Negativos" /></p></div><div class="col-rasgos"><p>
  <label for="total" name="total"></label>
  <input id="total" type="text" disabled="" name="total" class="alin" value="" placeholder="Total" />
</p></div></div></div><p id="error-message">
  ¡El último número (total) debe estar comprendido entre cero (0) o veinte (20)!
  </p></div>



<input class="boton" type="button" onclick="generar()" target="_parent" value="Generar" /><div class="codee"><textarea rows="8" id="code"></textarea>

Что я могу сделать?