Как показать элементы из формы в html

$(document).ready(function(){
$('button').click(function(e){
e.preventDefault();
$('#a').append('<ol><li>'+$("#name").val()+'</li><li>'+$("#last").val()+'</li><li>'+$("#age").val()+'</li><li>'+$("#points").val()+'</li><li>'+$("#over").val()+'</li></ol>')
})
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
     Input name: <input type = "text" id = "name"/><br/>
     Input last name: <input type = "text" id = "last"/><br/>
     Your age: <input type = "number" id = "age"/><br/>
     Your points: <input type = "number" id = "points"/><br/>
     Overral: <input type = "number" id = "over"/><br/>
     <button type = "submit">Submit</button><br></form>
     <div id = "a"></div>

<!-- 
  1 ) Add an ID so we can identify the form
-->
<form id = "person-add">
     Input name: <input type = "text"/><br/>
     Input last name: <input type = "text"/><br/>
     Your age: <input type = "number"/><br/>
     Your points: <input type = "number"/><br/>
     Overral: <input type = "number"/><br/>
     <!-- 2 ) Add an onclick event to run a JavaScript function.-->
     <button onclick = "addPerson(event);">Submit</button><br>
</form>

<!-- 3 ) Add the list we'll add people to. This has an ID as well.-->
<ol id = "person-list">
</ol>

<!-- 4 ) Then the JavaScript function that activates when the button is pressed. -->
<script type = "text/javascript">

  // It accepts a parameter, 'event' - this is passed from the onclick event.
  function addPerson(event){
    // By default, clicking a button in a form submits the form to the server.
    // Since we're using JavaScript to create the list, we'll prevent that from happening.
    event.preventDefault();

    // Using querySelectorAll, we get all the input fields within '#person-add'
    var person_fields = document.querySelectorAll('#person-add input');

    // Here we get the #person-list element we'll be adding the person to.
    var person_list = document.getElementById('person-list');
    
    // Create a list item for the person, but don't put it in the list yet.
    var person = document.createElement('li');
    
    // Loop through the fields and add their value list item.
    for( var field = 0; field < person_fields.length; field++ ) {
    
      // Add the value of the field to the person list item.
      person.innerText += person_fields[field].value;
      
      // If the next item isn't the end of the list, we'll add a space.
      if ( field + 1 !== person_fields.length ){
        person.innerText += ' ';
      }
    }
    
    // Lastly, add the person to the person_list.
    person_list.appendChild(person);
  }
</script>