How do I append elements to my bootstrap modal to display data from localstorage?

Question

I need to add elements to my bootstrap modal so that every time I open it I can see some data from my localstorage here's what I have so far. I'm just trying to append the fn element at the moment

JS:

function doSomething(e, student){

  let fn = document.createElement("h5");
  let ln = document.createElement("h5");

if (e.target !== e.currentTarget){
  var clickedItem = e.target.id;
  for(student of data){
  if (clickedItem == student.id)

   fn.innerHTML = (student.firstN);
   ln.innerHTML = (student.lastN);

   $('#infoModal modbod').append(fn);

   $('#infoModal').modal('show');    
  }
}

here's the HTML code for the modal

<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title" id="exampleModalLabel">Student Info</h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modbod">

        <div class="test" id="testdiv">

        </div>

      <!-- <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div> -->
    </div>
  </div>
</div>
</div>

Answer 1

You missed a # before modbod .

Fix it like this:

   $('#infoModal #modbod').append(fn);