How to insert user selected value from datalist dropdown into a template string to be shown as a message to the user when submitted?

Question

I have 2 datalists in the form below. I'm trying to get selected variable values (let input1 & let input2) to show in the message that appears when submitted via template string variable let message but it's not working. I'm not getting any errors.

Any idea why it does not work? And can event listeners be simplified so that I don't have to write out a new variable for each one since I have 4 datalists?

const victory = document.createElement('audio'),
    form = document.querySelector('form'),
    nameInput = document.querySelector('#name-input'),
    surnameInput = document.querySelector('#surname-input'),
    footer = document.querySelector('#footer');

const messageBox = document.createElement('div');
    
messageBox.setAttribute('class', 'message-box');
victory.src = 'sound/victory.mp3';

let input1 = nameInput.addEventListener('input', () => {
   const nameValue = surnameInput.value;
});

let input2 = surnameInput.addEventListener('input', () => {
    const surnameValue = surnameInput.value;
});

form.addEventListener('submit', (e) => {
    e.preventDefault();

    let message = `You have succesfully ordered ${input1} ${input2}`;
    messageBox.appendChild(document.createTextNode(message));

    victory.play();

    footer.parentNode.insertBefore(messageBox, footer);

    messageBox.style.backgroundColor = 'green';
    messageBox.style.textAlign = 'center';
    messageBox.style.margin = '0 1rem 2rem';
    messageBox.style.padding = '1rem';
    messageBox.style.borderRadius = '5px';
});

<form action="">

    <fieldset>
        <legend>Choose your skater</legend>

        <div>
            <label>Name</label>
        </div>

        <div>
            <input id="name-input" list="name" type="text" title="Select desired name of your skater">
            <datalist id="name">
                <option value="Tony" data-id="1"></option>
                <option value="Joe" data-id="2"></option>
                <option value="Paul" data-id="3"></option>
                <option value="Scott" data-id="4"></option>
            </datalist>
        </div>

        <div>
            <label>Surname</label>
        </div>
        
        <div>
            <input id="surname-input" list="surname" type="text" title="Select desired surname of your skater">
            <datalist id="surname">
                <option value="Hawk" data-id="1" label="james"></option>
                <option value="Carter" data-id="2"></option>
                <option value="Philmore" data-id="3"></option>
                <option value="Venice" data-id="4"></option>
            </datalist>
        </div>
    </fieldset>
    
     <button class="btn" type="submit" title="Submit your choice">Submit</button>
</form>

<footer id="footer"></footer>

Answer 1

The way you capture your input values is wrong. This will work.

let input1 = '';
nameInput.addEventListener('input', () => {
   input1 = nameInput.value;
});

let input2 = '';
surnameInput.addEventListener('input', () => {
    input2 = surnameInput.value;
});