My code is copy and pasted about 5 times but how can i make it so it's only once?

Question

Basically i wrote a script some time ago that changes the style and text of divs but theres a lot of repetitivity.

I've tried an array for all the tables with a forloop that loops all the tables but then it just prints them all out at once while they should be printed one at a time.

var counter2 = 0;
var name = document.getElementById('naam').value;
var numberOfPeople = document.getElementById('mensenAantal').value;
var time = document.getElementById('tijd').value;

if(document.getElementById('mensenAantal').value == 
document.getElementById('people2').value){
if (counter2 == 0){
document.getElementById('table3').innerHTML += "<br><b>Reserved</b>";
document.getElementById('table3').style.borderColor = 'red';                document.getElementById('table3').style.borderWidth = '2px';                document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';                
counter2 += 1;
}else if (counter2 == 1){
document.getElementById('table4').innerHTML += "<br><b>Reserved</b>";
document.getElementById('table4').style.borderColor = 'red';
document.getElementById('table4').style.borderWidth = '2px';
document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';
counter2 += 1;
}else if (counter2 == 2){
document.getElementById('table5').innerHTML += "<br><b>Reserved</b>";
document.getElementById('table5').style.borderColor = 'red';
document.getElementById('table5').style.borderWidth = '2px';
document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';
counter2 += 1;
}else if (counter2 == 3){
document.getElementById('table6').innerHTML += "<br><b>Reserved</b>";               document.getElementById('table6').style.borderColor = 'red';
document.getElementById('table6').style.borderWidth = '2px';
document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';
counter2 += 1;
}else if (counter2 == 4){
document.getElementById('table7').innerHTML += "<br><b>Reserved</b>";
document.getElementById('table7').style.borderColor = 'red';
document.getElementById('table7').style.borderWidth = '2px';
document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';
counter2 += 1;
}else if (counter2 => 5){
alert('All 4 person tables are reserved!');
}
}

What i want is basically the whole code that's copy pasted to be in one so kinda like this:

document.getElementById(tablenumber).innerHTML += "<br><b>Reserved</b>";
document.getElementById(tablenumber).style.borderColor = 'red';
document.getElementById(tablenumber).style.borderWidth = '2px';
document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';

Answer 1

You can use functions to avoid repeating LOC, for ex.

Replace following:

function getElement(id) {
 return document.getElementById(id);
}

with

getElement('table3')

Answer 2

How about this? Seems very clean too!

var counter2 = 0;
var name = document.getElementById('naam').value;
var numberOfPeople = document.getElementById('mensenAantal').value;
var time = document.getElementById('tijd').value;

if(document.getElementById('mensenAantal').value == 
    document.getElementById('people2').value){

    if( counter2 < 5) {
        var c = counter2 + 3;
        document.getElementById('table' + c).innerHTML += "<br><b>Reserved</b>";
        document.getElementById('table' + c).style.borderColor = 'red';                
        document.getElementById('table' + c).style.borderWidth = '2px';                
        document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';                
        counter2 += 1;
    } else {
        alert('All 4 person tables are reserved!');
    }
}

Answer 3

Using switch and storing your target table could be useful:

var counter2 = 0;
var name = document.getElementById('naam').value;
var numberOfPeople = document.getElementById('mensenAantal').value;
var time = document.getElementById('tijd').value;

if(document.getElementById('mensenAantal').value == 
document.getElementById('people2').value){

  var target;

  switch (counter2) {

    case 0:
      target = 'table3';
      break;

    case 1:
      target = 'table4';
      break;

    case 2:
      target = 'table5';
      break;

    case 3:
      target = 'table6';
      break;

    case 4:
      target = 'table7';
      break;

    default:
      alert('All 4 person tables are reserved!');
  }

  if (counter2 < 5) {
    document.getElementById(target).innerHTML += "<br><b>Reserved</b>";
    document.getElementById(target).style.borderColor = 'red';
    document.getElementById(target).style.borderWidth = '2px';
    document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';

    counter2++;
  }

}

Answer 4

var counter2 = 0;
var name = document.getElementById('naam').value;
var numberOfPeople = document.getElementById('mensenAantal').value;
var time = document.getElementById('tijd').value;

if (document.getElementById('mensenAantal').value ===
  document.getElementById('people2').value) {
  if (counter2 === 0) {
    reserveTable(`table${counter2+3}`);
  } else if (counter2 === 1) {
    reserveTable(`table${counter2+3}`);
  } else if (counter2 === 2) {
    reserveTable(`table${counter2+3}`);
  } else if (counter2 === 3) {
    reserveTable(`table${counter2+3}`);
  } else if (counter2 === 4) {
    reserveTable(`table${counter2+3}`);
  } else if (counter2 === 5) {
    alert('All 4 person tables are reserved!');
  }
}

const reserveTable = table => {
  document.getElementById(table).innerHTML += "<br><b>Reserved</b>";
  document.getElementById(table).style.borderColor = 'red';
  document.getElementById(table).style.borderWidth = '2px';
  document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';
  counter2 += 1;
}