I am trying to populate the boxes one after the other with the value of input field. If I add an input, all the boxes gets updated at once, which isn't what I need.

You don't need the for loop function,
Also u didn't get the value of the input in the DOM.
Did u copy those code?? Cos I can see two for loops and they are doing the same thing.
Rewrite the code without the for loop then get the value of the input from the DOM.

Your code is doing exactly what you’re asking of it. It’s looping through all the childNodes of the target div and setting their html to be your input value.
You’re going about the logic the wrong way.
At each button click, loop through all the child divs inside the target element and once you find the first one with a null value, assign it the value of the input and return from the function at once to ensure that only one div is populated. Don’t forget to clear out the current value of the input before leaving the function.
Also use descriptive names for your functions and variables.
This code should work fine.

Follow the advice of the poster above me. Enter the current input value into only the first null value div encountered and not all the divs. Are you building a data entry app.