How can I create a conditional statement to dynamically create a unique button for each ID?

Question

This is a form where people have to input their names and the button I'm creating is for team members to select their available times.

    let button = document.createElement("Button");
    let buttonTxt = document.createTextNode("Select Times");
    button.appendChild(buttonTxt);

    function createButton(){
      
        let name1 = document.getElementById("name1"); 
        let name2 = document.getElementById("name2");
        let name3 = document.getElementById("name3");
        let name4 = document.getElementById("name4");
        let name5 = document.getElementById("name5");

        if (name1 && name1.value) { // if there is a name in the input, a button will be created for their section
            document.getElementById('b1').appendChild(button);
        } 
        if (name2 && name2.value) {
            document.getElementById('b2').appendChild(button);
        } 
        if (name3 && name3.value) {
            document.getElementById('b3').appendChild(button);
        } 
        if (name4 && name4.value) {
            document.getElementById('b4').appendChild(button);
        } 
        if (name5 && name5.value) {
            document.getElementById('b5').appendChild(button);
        } }
       

If statements work individually but when put in a function it doesn't work anymore. Below is the HTML where top is the code from the form while the bottom HTML is from where the button should be created. The buttons will need to be ab;e to add event properties on them (ex. onclick)

        <h4>Team Host:</h4>
        <p><input type="text" name="name1" value="Enter Name" id="name1"> 
        </p>
        <br>
        <h4>Other Members:</h4>
        <p><input type="text" name="name2" id="name2"></p> 
        <br>
        <p><input class='new' type='text' name='name3' id='name3'></p>
        <br>
        <p><input class='new' type='text' name='name4' id='name4'></p>
        <br>
        <p><input class='new' type='text' name='name5' id='name5'></p>

        <p id="p1"></p>
        <p>Times go here</p>
        <p id="b1" name="b1"></p>
        <p id="p2"></p>
        <p>Times go here</p>
        <p id="b2" name="b2"></p>
        <p id="p3"></p>
        <p>Times go here</p>
        <p id="b3" name="b3"></p>
        <p id="p4"></p>
        <p>Times go here</p>
        <p id="b4" name="b4"></p>
        <p id="p5"></p>
        <p>Times go here</p>
        <p id="b5" name="b5"></p>

Answer 1

maybe this?

const button    = document.createElement('button')
  ,   buttonTxt = document.createTextNode('Select Times')
  ;
button.setAttribute('onclick', 'foo(this)')  // add click function to button
 
button.appendChild(buttonTxt);

document.querySelectorAll('#name1,#name2,#name3,#name4,#name5')
        .forEach(nm=>
          {
          if(nm.value) 
            {
            let newBt = button.cloneNode(true)
              , ref   = nm.id.replace(/^\D+/g,'') 
              ;
            newBt.dataset.info = ref
            document.getElementById(`b${ref}`) // get correspondig B1-5
                      .appendChild(newBt)   // add new button 
            }
          })

// buttons calls
function foo(bt)
  {
  console.clear()
  console.log('clicked is : ', bt.dataset.info )
  }

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  }
p {
  display          : block;
  height           : 2.4em;
  background-color : lightgrey;
  padding          : .2em;
  margin           : .1em;
  }
 h4 {
  margin : .5em;
 }

<h4>Team Host:</h4>
<p><input type="text" name="name1" id="name1" value="Enter Name"></p> 
  <br>
<h4>Other Members:</h4>
<p><input type="text" name="name2" id="name2"></p> 
<p><input type='text' name='name3' id='name3'></p>
<p><input type='text' name='name4' id='name4' value="abc"></p>
<p><input type='text' name='name5' id='name5'></p>
<hr>

<p id="b1"></p>
<p id="b2"></p>
<p id="b3"></p>
<p id="b4"></p>
<p id="b5"></p>