Populate different type form with jquery each not working

Question

I'm trying to populate different type form on change option. My code goes below without error and I'm not getting expected result. Actually I want load all array value as checkbox but it always render last one and Unable to find What i'm doing wrong?

[Jquery]

$('select[name="scales"]').on('change',function(e){
    e.preventDefault();
    var scale = $(this).val(); 
     switch(scale)
     {
        case 'shirtscale':
            var x = ['S','M','L','XL','XXL','XXXL','4XL','5XL','6XL','7XL','8XL','9XL','10XL'];
            $.each(x, function (index, value) {
                $("#xe").html("<input id='"+index+"' type='checkbox' value='"+value+"'>");
                console.log(value);
            });
            break;
        case 'ringscale':
            var x = ['3','3.5','4','4.5','5','5.5','6','6.5','7','7.5','8','8.5','9','9.5','10','10.5','11','11.5','12','12.5'];
            $.each(x, function (index, value) {
                $("#xe").html("<input id='"+index+"' type='checkbox' value='"+value+"'>");
                console.log(value);
            });         
            break;
        case 'shoescale':
            var x = ['A','B','C','D','E','F','G'];
            $.each(x, function (index, value) {
                $("#xe").html("<input id='"+index+"' type='checkbox' value='"+value+"'>");
                console.log(value);
            });             
            break;
        default:
    }
return false;
});

[View]

<select id="scales" name="scales">
    <option value="0">Choose Measurement Scale ...</option>
    <option value="shirtscale">Shirt</option>
    <option value="ringscale">Finger Ring</option>
    <option value="pantscale">Pant</option>
    <option value="waistscale">Waist</option>
    <option value="wristscale">Wrist</option>
    <option value="brascale">Bra</option>
</select>

<div id="xe"></div>

Answer 1

That is because $("#xe").html(... will overwrite the dom that is created for the previous element. Use append

$('select[name="scales"]').on('change', function(e) {
  e.preventDefault();
  var scale = $(this).val();
  switch (scale) {
    case 'shirtscale':
      var x = ['S', 'M', 'L', 'XL', 'XXL', 'XXXL', '4XL', '5XL', '6XL', '7XL', '8XL', '9XL', '10XL'];
      appendVal(x);
      break;
    case 'ringscale':
      var x = ['3', '3.5', '4', '4.5', '5', '5.5', '6', '6.5', '7', '7.5', '8', '8.5', '9', '9.5', '10', '10.5', '11', '11.5', '12', '12.5'];
      appendVal(x);
      break;
    case 'shoescale':
      var x = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
      appendVal(x);
      break;
    default:
  }
  return false;
});

function appendVal(x) {
  // remove previous dom
  $("#xe").html('');
  let elem = ''
  $.each(x, function(index, value) {
    // create dom string taking each value from the arrat
    elem += `<input id='${index}' type='checkbox' value='${value}'><label for='${index}'>${value}</label>`
  });
  // append the final dom string
  $("#xe").append(elem);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="scales" name="scales">
  <option value="0">Choose Measurement Scale ...</option>
  <option value="shirtscale">Shirt</option>
  <option value="ringscale">Finger Ring</option>
  <option value="pantscale">Pant</option>
  <option value="waistscale">Waist</option>
  <option value="wristscale">Wrist</option>
  <option value="brascale">Bra</option>
</select>

<div id="xe"></div>