Merging Output into one text box from multiple text boxes

I have a username and password field which I need both inputs captured from the multiple text input boxes above and be merged into the username and password field meaning both username and password will be the same. but my challenge is merging the input from the multiple fields and this is what ive managed to do so far

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>


<style>
    .flex{
        display: flex;
    }
    .otSc {
        margin: 0;
        margin-right: 16px;
        border: 1px solid;
        border-radius: 8px;
        padding: 1px 0px;
        font-size: 15px;
        text-align: center;
        width: 100%;
        outline: none;
    }
    .otSc:last-child{
        margin-right: 0;
    }
    .otpCont {
        padding: 10px 10px;
    }
</style>

<div class="col-md-3">
    <div class="otpCont flex spaceBetween">
        <input id="maxCode" class="otSc" type="text" maxlength="1">
        <input class="otSc form-control" type="text" maxlength="1">
        <input class="otSc form-control" type="text" maxlength="1">
        <input class="otSc form-control" type="text" maxlength="1">
        <input class="otSc form-control" type="text" maxlength="1">
        <input class="otSc form-control" type="text" maxlength="1">
    </div>

    <p>what is typed at the top should be a merged output at the bottom</p>
    <div class="col-md-6 m-b-15" >
        <input id="maxVoucherCode" type="text" class="form-control" name="username" placeholder="user merged input"/>
    </div>
    <div class="col-md-6 m-b-15" >
        <input id="maxVoucherCode" type="text" class="form-control" name="password" placeholder="pass merged input"/>
    </div>
</div>
<script type="text/javascript">
    $("#maxVoucherCode").keyup(function() {
        var maxVoucherCode = $(this).val();
        $("#maxCode").val(maxVoucherCode);    
    });

    $("#maxCode").keyup(function() {
        var maxCode = $(this).val();
        $("#maxVoucherCode").val(maxCode);    
    });
</script>

<script type="text/javascript">
    document.querySelectorAll(".otSc").forEach(function(otpEl) {
        otpEl.addEventListener("keyup", backSp);
        otpEl.addEventListener("keypress", function() {
            var nexEl = this.nextElementSibling;
            nexEl.focus();
        })
    })

    function backSp(backKey) {
        if (backKey.keyCode == 8) {
            var prev = this.previousElementSibling.focus()
        }
    } 
</script>

>Solution :

You don’t need jQuery. I would borrow the code from this answer: Paste PIN into multiple input fields, and for the copying of the PIN into the two hidden input (password/username) I would additionally use const PINValue = elsInput.reduce((s, el) => s + el.value, "");

Example:

// DOM utility functions:
const els = (sel, par = document) => par.querySelectorAll(sel);
const el = (sel, par = document) => par.querySelector(sel);


// Task: multiple inputs "field"

const elUN = el(`[name="username"]`);
const elPW = el(`[name="password"]`);

// Not sure why you would need this since are hidden, but there you go:
// elUN.addEventListener("input", () => { elPW.value = elUN.value; });
// elPW.addEventListener("input", () => { elUP.value = elPW.value; });


els(".pin").forEach((elGroup) => {

  const elsInput = [...els(`[name="pin[]"]`, elGroup)];
  const len = elsInput.length;
  
  const handlePaste = (ev) => {
    const clip = ev.clipboardData.getData('text');     // Get clipboard data
    const pin = clip.replace(/\s|-/g, "");             // Sanitize string
    const ch = [...pin];                               // Create array of chars
    elsInput.forEach((el, i) => el.value = ch[i]??""); // Populate inputs
    elsInput[Math.min(len, pin.length) - 1]?.focus();  // Focus input
  };

  const handleInput = (ev) => {
    const elInp = ev.currentTarget;
    const i = elsInput.indexOf(elInp);
    if (elInp.value && (i+1) % len) elsInput[i + 1]?.focus();  // focus next
    
    // Copy to UN/PW:
    const PINValue = elsInput.reduce((s, el) => s + el.value, "");
    elUN.value = PINValue;
    elPW.value = PINValue;
  };
  
  const handleKeyDn = (ev) => {
    const elInp = ev.currentTarget
    const i = elsInput.indexOf(elInp);
    if (!elInp.value && ev.key === "Backspace" && i) elsInput[i - 1]?.focus(); // Focus previous
  };
  
  
  // Add the same events to every input in group:
  elsInput.forEach(elInp => {
    elInp.addEventListener("paste", handlePaste);   // Handle pasting
    elInp.addEventListener("input", handleInput);   // Handle typing
    elInp.addEventListener("keydown", handleKeyDn); // Handle deleting
  });
  
});
    

.flex {
  display: flex;
}

.pin>input {
  text-align: center;
  width: 2rem;
  height: 2rem;
}

Copy some of thise PINs into any of the below 6 PIN inputs:<br>
<code>123329</code><br>
<code>6 5 0 3 2 1</code><br>
<code>444-998</code><br>
<code>x1A23z</code>
<code>12</code>
<br>

<div class="col-md-3">
  <div class="otpCont flex spaceBetween">

    <form>
      <h3>PIN:</h3>
      <div class="pin">
        <input type="text" name="pin[]" maxlength="1" autocomplete="off" required autofocus>
        <input type="text" name="pin[]" maxlength="1" autocomplete="off" required>
        <input type="text" name="pin[]" maxlength="1" autocomplete="off" required>
        <input type="text" name="pin[]" maxlength="1" autocomplete="off" required>
        <input type="text" name="pin[]" maxlength="1" autocomplete="off" required>
        <input type="text" name="pin[]" maxlength="1" autocomplete="off" required>
      </div>

      <br> Hidden inputs demo:<br>
      <input type="text" name="username">
      <input type="text" name="password">

      <button type="submit" class="btn btn-lg btn-primary">SUBMIT</button>
    </form>
  </div>

</div>