How to make my function shorter JavaScript

Question

I Write function that 1.create P elements in divs 2. generate random number in random P element in specific div

But... My JavaScript code have 700 lines :D I will give only small example of what i have.

HTML:

<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>

CSS:

body {
  display: inline-block;
  background-color: black;
  box-sizing: border-box;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.example {
  display: inline-block;
  position: absolute;
  color: orange;
  width: 100%;
  font-size: 30px;

}

.example:nth-child(2) {  

  top: 20%;
}
.example:nth-child(3) {  

  top: 40%;
}
.example:nth-child(4) {  

  top: 60%;
}
.example:nth-child(5) {  

  top: 80%;


}

.num {
  display: inline-block;
  color: orange;
  width: 50px;
  height: 50px;
  text-align: center;


}

JavaScript

setInterval(updateOneNumber, 1000);
setInterval(updateOneNumber01, 1000);
setInterval(updateOneNumber02, 1000);
setInterval(updateOneNumber03, 1000);
setInterval(updateOneNumber04, 1000);
var example = document.getElementsByClassName("example");
var elements = example[0].getElementsByClassName("num");
var makeBoxInterval = setInterval(makeBoxes, 5);
var makeBoxInterval01 = setInterval(makeBoxes01, 5);
var makeBoxInterval02 = setInterval(makeBoxes02, 5);
var makeBoxInterval03 = setInterval(makeBoxes03, 5);

var makeBoxInterval04 = setInterval(makeBoxes04, 5);


function updateOneNumber() {
    var elements = example[0].getElementsByClassName("num");
  var numElements = elements.length;
  var i = Math.floor(Math.random() * numElements);
  elements[i].innerHTML = Math.floor(Math.random() * 9);
}
function updateOneNumber01() {
    var elements = example[1].getElementsByClassName("num");
  var numElements = elements.length;
  var i = Math.floor(Math.random() * numElements);
  elements[i].innerHTML = Math.floor(Math.random() * 9);
}
function updateOneNumber02() {
    var elements = example[2].getElementsByClassName("num");
  var numElements = elements.length;
  var i = Math.floor(Math.random() * numElements);
  elements[i].innerHTML = Math.floor(Math.random() * 9);
}
function updateOneNumber03() {
    var elements = example[3].getElementsByClassName("num");
  var numElements = elements.length;
  var i = Math.floor(Math.random() * numElements);
  elements[i].innerHTML = Math.floor(Math.random() * 9);
}
function updateOneNumber04() {
    var elements = example[4].getElementsByClassName("num");
  var numElements = elements.length;
  var i = Math.floor(Math.random() * numElements);
  elements[i].innerHTML = Math.floor(Math.random() * 9);
}



// generates paragraph with class num
function makeBoxes() {
  debugger;
  var para = document.createElement("p");
  para.classList.add("num");
  var parent = example;
  var elements = example[0].getElementsByClassName("num");
  var rowWidth = parent[0].offsetWidth;
  var boxesSoFar = elements.length;
  var boxWidth = elements[0].offsetWidth;
  var boxesInRow = rowWidth / boxWidth;
  if (boxesSoFar > boxesInRow -1) {
    clearInterval(makeBoxInterval);
  } else {
    parent[0].appendChild(para);
  }
}
function makeBoxes01() {
  debugger;
  var para = document.createElement("p");
  para.classList.add("num");
  var parent = example;
  var elements = example[1].getElementsByClassName("num");
  var rowWidth = parent[1].offsetWidth;
  var boxesSoFar = elements.length;
  var boxWidth = elements[0].offsetWidth;
  var boxesInRow = rowWidth / boxWidth;
  if (boxesSoFar > boxesInRow -1) {
    clearInterval(makeBoxInterval01);
  } else {
    parent[1].appendChild(para);
  }
}

function makeBoxes02() {
  debugger;
  var para = document.createElement("p");
  para.classList.add("num");
  var parent = example;
  var elements = example[2].getElementsByClassName("num");
  var rowWidth = parent[2].offsetWidth;
  var boxesSoFar = elements.length;
  var boxWidth = elements[0].offsetWidth;
  var boxesInRow = rowWidth / boxWidth;
  if (boxesSoFar > boxesInRow -1) {
    clearInterval(makeBoxInterval02);
  } else {
    parent[2].appendChild(para);
  }
}

function makeBoxes03() {
  debugger;
  var para = document.createElement("p");
  para.classList.add("num");
  var parent = example;
  var elements = example[3].getElementsByClassName("num");
  var rowWidth = parent[3].offsetWidth;
  var boxesSoFar = elements.length;
  var boxWidth = elements[0].offsetWidth;
  var boxesInRow = rowWidth / boxWidth;
  if (boxesSoFar > boxesInRow -1) {
    clearInterval(makeBoxInterval03);
  } else {
    parent[3].appendChild(para);
  }
}
function makeBoxes04() {
  debugger;
  var para = document.createElement("p");
  para.classList.add("num");
  var parent = example;
  var elements = example[4].getElementsByClassName("num");
  var rowWidth = parent[4].offsetWidth;
  var boxesSoFar = elements.length;
  var boxWidth = elements[0].offsetWidth;
  var boxesInRow = rowWidth / boxWidth;
  if (boxesSoFar > boxesInRow -1) {
    clearInterval(makeBoxInterval04);
  } else {
    parent[4].appendChild(para);
  }
}

As you see there is a lot of code. I have 23 divs with id Example :D

Example: Fiddle

So far i try for statement but without effect

Example: fiddle

Answer 1

Basic refactoring with function arguments and one for loop:

var example = document.getElementsByClassName("example");
var elements = example[0].getElementsByClassName("num");

for (let i = 0; i < 5; i++)
{
  const handle = setInterval(() => makeBoxes(i), 5);
  setInterval(() => updateOneNumber(i, handle), 1000);
}

function updateOneNumber(x) {
    var elements = example[x].getElementsByClassName("num");
  var numElements = elements.length;
  var i = Math.floor(Math.random() * numElements);
  elements[i].innerHTML = Math.floor(Math.random() * 9);
}

// generates paragraph with class num
function makeBoxes(i, handle) {
  var para = document.createElement("p");
  para.classList.add("num");
  var parent = example;
  var elements = example[i].getElementsByClassName("num");
  var rowWidth = parent[i].offsetWidth;
  var boxesSoFar = elements.length;
  var boxWidth = elements[0].offsetWidth;
  var boxesInRow = rowWidth / boxWidth;
  if (boxesSoFar > boxesInRow -1) {
    clearInterval(handle);
  } else {
    parent[i].appendChild(para);
  }
}

body {
  display: inline-block;
  background-color: black;
  box-sizing: border-box;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.example {
  display: inline-block;
  position: absolute;
  color: orange;
  width: 100%;
  font-size: 30px;

}

.example:nth-child(2) {  

  top: 20%;
}
.example:nth-child(3) {  

  top: 40%;
}
.example:nth-child(4) {  

  top: 60%;
}
.example:nth-child(5) {  

  top: 80%;


}

.num {
  display: inline-block;
  color: orange;
  width: 50px;
  height: 50px;
  text-align: center;


}

<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>
<div class="example"><p class="num"></p></div>

Answer 2

Just let all of your functions take a parameter pos, e.g:

function updateOneNumber(pos) {
 var elements = example[pos].getElementsByClassName("num");
 var numElements = elements.length;
 var i = Math.floor(Math.random() * numElements);
 elements[i].innerHTML = Math.floor(Math.random() * 9);
}

And then just set the intervals:

setInterval(updateOneNumber, 1000, /*pos */ 0);