Please can someone explain why my javascript code does not work

I want when I click on the button the width of the divs turns to 300px.

function testing() {
  var nbrTry = 5;
  for (let i = 0; i < nbrTry; i++) {
    document.write("<div></div>");
    let div = document.getElementsByTagName('div');
    div[i].setAttribute('id', `div${i}`);
    let v = document.getElementById(`div${i}`);
    v.style.width = '60px';
    v.style.height = '60px';
    v.style.background = 'black';
    v.style.margin = '2px';
    v.style.transition = `2s`;
  }

  document.write("<button></button>");
  let btn2 = document.getElementsByTagName('button');
  btn2[0].setAttribute('id', `btn2`);
  let b = document.getElementById(`btn2`);
  b.innerHTML = "moving the divs";
  b.style.margin = '50px';
}

function movingDivs() {
  var nbrTry = 5;
  for (let i = 0; i < nbrTry; i++) {
    let v = document.getElementById(`div${i}`);
    v.style.width = '300px';
  }
}

let btn = document.getElementById("btn1");
btn.addEventListener('click', function() {
  testing();
});

let btn3 = document.getElementById("btn2");
btn3.addEventListener('click', function() {
  movingDivs();
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div styl="height:120px;width:100%;"><button id="btn1" style="margin: 100px;">Create Elements</button></div>
  <script rel="script/javascript" src="main.js"></script>
</body>

</html>