How Can I Use JavaScript to Output Value of Input A into Input B?

I have a two-step login form. In the first step, I have "username" as "id" and "name" of the text input. I also have "password" as id and "name" of the second input field, where the user is prompted to enter username and password.

In the second step, I have "confirmusername" as "id" and "name" of the text input. I also have "confirmpassword" as "id" and "name" of the text input.

I want the the value of the "username" entered in the first step to become the value of "confirmusername".

Your help would be much appreciated. Thanks in advance.

The following is my code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
form#multiphase{ border:#000 1px solid; padding:24px; width:350px; }
form#multiphase > #show_all_data{ display:none; }
</style>
<script>
var username, password, confirmusername, confirmpassword;
function _(x){
    return document.getElementById(x);
}
function processPhase1(){
    username = _("username").value;
    password = _("password").value;
    if(username.length > 2){
        _("display_username").innerHTML = username;
        _("display_password").innerHTML = password;
        _("phase1").style.display = "none";
        _("show_all_data").style.display = "block";
    }
}
function submitForm(){        
    confirmusername = _("confirmusername").value;
    confirmpassword = _("confirmpassword").value;
    if(confirmpassword.length > 0){
        _("multiphase").method = "post";
        _("multiphase").action = "";
        _("multiphase").submit();
    }
}
</script>
</head>
<body>

<form id="multiphase" onsubmit="return false">
  <div id="phase1">
    Username: <input id="username" name="username"><br>
    Password: <input id="password" name="password"> <br>
    <button  id="next" onclick="processPhase1()">Next</button>
  </div>
  <div id="show_all_data">
    Username: <span id="display_username"></span> <br>
    Password: <span id="display_password"></span> <br>
    Confirm Username: <input id="confirmusername" name="confirmusername" value=""><br>
    Confirm Password: <input id="confirmpassword" name="confirmpassword"> <br>
    <button onclick="send()">Send</button>
  </div>
</form>


<script>
var input = document.getElementById("username");
var input = document.getElementById("password");
input.addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    event.preventDefault();
    document.getElementById("next").click();
  }
});
</script> 
<script>
var input = document.getElementById("confirmusername");
var input = document.getElementById("confirmpassword");
input.addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    event.preventDefault();
    document.getElementById("send").click();
  }
});
</script>
</body>
</html>

How Do I SELECT These Two Tables Using A Single PDO Query

I have two MySQL tables, which I want to SELECT using a single PDO query and positional placeholders.

I've been going through similar questions here to find a solution, but none seems to match the issues I'm having.

The following code is the section of my script:

<?php
// query users table to retrieve its contents   
if (isset($_SESSION["user_id"]["0"]))
{               
    // select a particular user by user_id
    $user_id = isset($_POST["user_id"]) ? $_POST["user_id"] : '';

    $stmt = $pdo->prepare("SELECT * FROM users WHERE user_id=?",$_SESSION["user_id"]["0"]);
    $stmt->execute([$user_id]); 
    $user = $stmt->fetch(); # get user data

}

    // query courses table to retrieve its contents            
        $cid = $_POST["cid"] ?? NULL;
        if (is_null($cid))
    {
           $stmt = $pdo->query("SELECT * FROM courses");
        }
        else
    {
           $stmt = $pdo->prepare("SELECT * FROM courses WHERE cid = ?");
           $stmt->execute([$cid]);
    }

        $results = $stmt->fetchAll(PDO::FETCH_ASSOC);

        echo '<option value="">'. "Select a course to proceed" .'</option>';

        foreach ($results as $row) {
        echo '<option value=" '. $row["cid"] .' ">'. $row["c_name"] .'</option>';                
    }

Apart from echoing $row["cid"] (course ID) and $row["c_name"] (course name) from the courses table, I also want to echo the following from the same courses table: $row["code"], $row["duration"], $row["start"]

In the users table, I have the logged in user's "user_id", "firstname", "lastname", "username", "email", which I also want to echo in the above foreach loop. That means the user must be logged in.

Thank you in advance for your time and help.