How to make onClick perform multiple similar functions at once?

Question

I'm trying to make the Button onClick fill both #box elements, with the same input from the forms. And potentially add more boxes in the future. But it just seems to only be calling the first 2 functions.

Here's the codepen example!

Tried changing the syntax of the onclick call a few different ways. Didn't help

function myFunction() {
    var str = document.getElementById("myname").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="name"]').value);
    document.getElementById("myname").innerHTML = res;
}
function myFunction2() {
    var str = document.getElementById("theirname").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="theirname"]').value);
    document.getElementById("theirname").innerHTML = res;
}
function lovely2() {
    var str = document.getElementById("myname1").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="name"]').value);
    document.getElementById("myname1").innerHTML = res;
}
function lovely5() {
    var str = document.getElementById("theirname1").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="theirname1"]').value);
    document.getElementById("theirname1").innerHTML = res;
}

<div id="form1">
    <form>
        <p>
            <br><input type="text" class="name1" name="name" placeholder="VXA Name">
            <br>
        </p>
        <p><br><input type="text" class="name2" placeholder="CX Name" name="theirname"></p>
    </form>

    <div class="forms">
        <button onclick="myFunction(); myFunction2(); lovely2(); lovely5()">Fill Names</button>
        <button class="2" onclick="#">Reset</button>
    </div>

</div>

<div id="box1">
    <a>Thank you, </a>  <a id="theirname">_____</a>, for contacting Us. My name is<a id="myname"> _____, and I'd be more than happy to assist you today.
        <a class="copy">Copy text</a>
    </a>
</div>

<div id="box2">
    <a>Thank you, </a>  <a id="theirname1">_____</a>, for contacting Us. My name is<a id="myname1"> _____, and I'd be more than happy to assist you today.
        <a class="copy">Copy text</a>
    </a>
</div>

Answer 1

There is a few typo in your code - incorrect position of } and input[name="theirname1"].

function myFunction() {
    var str = document.getElementById("myname").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="name"]').value);
    document.getElementById("myname").innerHTML = res;
}
function myFunction2() {
    var str = document.getElementById("theirname").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="theirname"]').value);
    document.getElementById("theirname").innerHTML = res;
}
function lovely2() {
    var str = document.getElementById("myname1").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="name"]').value);
    document.getElementById("myname1").innerHTML = res;
}
function lovely5() {
    var str = document.getElementById("theirname").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="theirname"]').value);
    document.getElementById("theirname1").innerHTML = res;
}

<div id="form1">
    <form>
        <p><br><input type="text" class="name1" name="name" placeholder="VXA Name">
        <br>
        </p>
        <p><br><input type="text" class="name2" placeholder="CX Name" name="theirname">
    </form>
    
    <div class="forms">
        <button onclick="myFunction(); myFunction2(); lovely2(); lovely5()">Fill Names</button>
        <button class="2" onclick="#">Reset</button>
    </div>
    
</div>

<div id="box1">
    <a>Thank you, </a>  <a id="theirname">_____</a>, for contacting Us. My name is<a id="myname"> _____, and I'd be more than happy to assist you today.
        <a class="copy">Copy text</a>
    </a>
</div>

<div id="box2">
    <a>Thank you, </a>  <a id="theirname1">_____</a>, for contacting Us. My name is<a id="myname1"> _____, and I'd be more than happy to assist you today.
        <a class="copy">Copy text</a>
    </a>
</div>

Answer 2

You can call all the functions within another function and fire that when the button is clicked. I don't think it is possible to call all functions within the html event at once.

<button onclick="clicked()">Click me</button>

function clicked() {
    myFunction();
    myFunction2();
    lovely2();
    lovely5();
}

This code will still not work thought because in your current javascript, lovely2() and lovely() are nested within myFunction2() so you cannot call them and calling myFunction2() will not call them either. You will need to move them outside, like this

function myFunction() {
var str = document.getElementById("myname").innerHTML;
var res = str.replace("_____", 
document.querySelector('input[name="name"]').value);
document.getElementById("myname").innerHTML = res;
}

function myFunction2() {
var str = document.getElementById("theirname").innerHTML;
var res = str.replace("_____", 
document.querySelector('input[name="theirname"]').value);
document.getElementById("theirname").innerHTML = res;
}

function lovely2() {
var str = document.getElementById("myname1").innerHTML;
var res = str.replace("_____", 
document.querySelector('input[name="name"]').value);
document.getElementById("myname1").innerHTML = res;
}

function lovely5() {
var str = document.getElementById("theirname1").innerHTML;
var res = str.replace("_____", 
document.querySelector('input[name="theirname1"]').value);
document.getElementById("theirname1").innerHTML = res;
}

Answer 3

Instead of trying to call multiple functions on you click event, you can simply refactor it by doing this. onClick() serves as the function that handles the click event.

<button onclick="onClick()">Fill Names</button>

And on your JavaScript,

function onClick() {
  myFunction(); 
  myFunction2();
  lovely2(); 
  lovely5();
}

onClick() will be fired when the user clicks on that button, and this will ensure that all the 4 functions will be called.