Replicate in a web page the current, back and forward functionality of a browser - JS code only - full code in jsfiddle

whiteboard_browser_back_function.js

// https://jsfiddle.net/934umzan/2/

var currentPages = [];
var backPages = [];
var forwardPages = [];

$('#submit').on('click', function(event) {
  event.preventDefault();
  var text = $('#text').val();
  console.log(text);
  //var textP = $(`<p>${text}</p>`);
  var textP = $(`<p>$text</p>`);
  textP.appendTo('.current');
  currentPages.push(text);
  console.log(currentPages);
  renderCurrent();
});

$('#back').on('click', function(event) {
  // take last entry in back and write to current and enter in forward and   remove from back
});

$('#forward').on('click', function(event) {
  // remove last entry from forward and put in current; and what was current gets written to back
});

var renderCurrent = function() {
	$('.current').empty();
	for (var i=0; i < currentPages.length; i++) {
  	//var textP = $(`<p>${text}</p>`);
    var textP = $("foo");
    console.log(textP);
    textP.appendTo('.current');
  }
}

var renderBack = function() {

}