How to create this pattern for JavaScript?

Question

I can't figure out how to make the html pattern look like this:

....1

...2.

..3..

.4...

5....

When I used to this code, the results are like this:

....1.

....1.

....1.

....1.

....1.

How do I make it so that it the number gets bigger, moves one place to the left as you go down the row?

function question4() {
  let input = +document.getElementById('q4').value;
  let row = '';
  let output = '';
  if (input >= 100) {
    document.getElementById('output4').innerHTML = 'Error';
  } else {
    for (let i = 1; i <= input; i++) {
      for (let j = input; row.length <= input; j--) {
        if (j === i) {
          row += j;
        } else {
          row += '.'
        }
      }
      output += '<p>' + row + '</p>'
    }
    document.getElementById('output4').innerHTML = output;
  }
}

question4();

<div id="output4"></div>
<input id="q4" value="5">

Answer 1

There is working code

function question4() {
  const outputEl = document.getElementById('output4');
  const inputEl = document.getElementById('q4');
  const value = +inputEl.value;
  
  if (value >= 100) outputEl.innerHTML = 'ERROR';
  else {
    let output = '';
    for(let i = 1; i <= value; i++) {
      let row = '';
      
      for(let y = value; y >= 1; y--) {
        if(y === i) row += i;
        else row += '.';
      }
      
      output += '<p>' + row + '</p>';
    }
    
    outputEl.innerHTML = output;
  }
}

question4();

<div id="output4"></div>
<input id="q4" value="10">