multi step form in bootstrap code example

Example 1: javascript steps

// want to creat a table 

//1- start with the header
var tableEl = document.getElementById("table");//Global variable we can use it without declare it again 
var headerArr=['from','to','capacity','reserve','lefted'];
function header(){
  var trEl = document.createElement('tr');
  tableEl.appendChild(trEl);
  for(var i=0 ; i < headerArr.length ; i++ ){
var thEl = document.createElement('th');
trEl.appendChild(thEl); 
thEl.textContent = `${headerArr[i]}`;
}
}
//call the function
header();

Example 2: javascript steps

// 2-now want to craet another table to but the data in it 

//but before we creat it we need a constructor function 

function data(from, to, capacity, reserve,lefted) {
this.from=from;
this.to=to;
this.capacity=capacity ;
this.reserve=reserve ;
this.lefted=0;
this.leftedSum=0

}


//now we can creat the table 
data.prototype.render=function()//Acsses the constructor function
{
 var tableEl = document.getElementById("table");

var trEl1=document.createElement('tr');
tableEl.appendChild(trEl1);

var tdEl1 = document.createElement('td');
trEl1.appendChild(tdEl1);
tdEl1.textContent=`${this.from}`


var tdEl2 = document.createElement('td');
trEl1.appendChild(tdEl2);
tdEl2.textContent=`${this.to}`



var tdEl3 = document.createElement('td');
trEl1.appendChild(tdEl3);
tdEl3.textContent=`${this.capacity}`



var tdEl4 = document.createElement('td');
trEl1.appendChild(tdEl4);
tdEl4.textContent=`${this.reserve}`


var tdEl5 = document.createElement('td');
trEl1.appendChild(tdEl5);
tdEl5.textContent=`${this.lefted}`

}

//call the function 
data.prototype.render();

Example 3: javascript steps

// now I want to calculate the lefted seats 

data.prototype.leftedSeats=function() //Acsses the constructor
{
    
    this.lefted = this.capacity-this.reserve ;

}

data.prototype.leftedSeats();