Creating multiselect checkbox

Question

I have a select statement where I can select one value at a time , I am trying to create a checkbox for multi-select. My dropdown values are coming from the backend. I cannot use any bootstrap plugin. Below is the code, is there anyway to achieve this with little modification to the code. Any help will be appreciated.

 
function selectMultiple(studentList) {
  for (var i = 0; i < studentList.length; i++) {
    let studentVal = studentList[i];
    $("#student").append('<option value="' + studentVal + '">' + studentVal + '</option>');
  }
}

//studentlist coming from backend
var studentList = ['A', 'B', 'C'];

selectMultiple(studentList);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="test">
      <select id="student">
        <option selected="selected" value="default">select here</option>
      </select>
    </td>
  </tr>
</table>

Answer 1

Here is the code snippet for having checkboxes inside a drop down.

.multipleSelect {
  width: 130px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: auto;
}

.selectionBox {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#multipleCheckbox {
  display: none;
  border: 1px solid;
}

#multipleCheckbox label {
  display: block;
}

#multipleCheckbox label:hover {
  background-color: #42ecf5;
}

<div class="multipleSelect">
  <div class="selectBox" onclick="showMultipleCheckbox()">
    <select>
      <option>Select a checkbox</option>
    </select>
    <div class="selectionBox"></div>
  </div>
  <div id="multipleCheckbox">
    <label for="one">
        <input type="checkbox" id="one" />Check box1</label>
    <label for="two">
        <input type="checkbox" id="two" />Check box2</label>
    <label for="three">
        <input type="checkbox" id="three" />Check box3</label>
  </div>
</div>

<script>
  var selectTagOpen = false;

  function showMultipleCheckbox() {
    var checkboxes = document.getElementById("multipleCheckbox");
    if (!selectTagOpen) {
      checkboxes.style.display = "block";
      selectTagOpen = true;
    } else {
      checkboxes.style.display = "none";
      selectTagOpen = false;
    }
  }
</script>