javascript html css flexbox unique-values

assigning multiple, different values in JS function

I'm working on a side project and I've stumbled across an issue I'm not sure how to resolve. I'm still on the basics and beginner level JS. I'm trying my hand at developing a ticketing system, working through one issue at a time as I think of how I want things to function. The issue I'm having is that I want each new column in a new ticket creation to have a different value - which are all pulled from a form an agent fills out in a "new ticket" modal - but they're all getting assigned the value from the very last input in the form, the Problem Description form. I've yet to come up with a way to match the ticketColValues and ticketColDivs values so that the proper value goes into the proper div.

This code may look wonky... like I said, I'm a beginner and I'm just trying to see if I can find ways to make things work. If anyone has any ideas on how to optimize the code I'm open to that as well. I tried to attach most of the pertinent code, my CSS isn't exactly the cleanest so I'm sure I've missed things, but the JS is the biggest issue.

Thanks for any and all help!

const submitButton = document.getElementById('submit-ticket-button');
let ticketIdBase = 1;  //should update every time a new ticket is created

submitButton.addEventListener('click', () => {
    //time constants for timestamping
    const current = new Date();
    const currentTime =  current.toLocaleTimeString([], {hour: 'numeric',  minute: '2-digit'});
    const timeStamp = `${current.getMonth()}/${current.getDate()}/${current.getFullYear()} ${currentTime}`;
    
    //grab form values
    const ticketId = ticketIdBase;
    const dateTimeEntered = timeStamp;
    const enteredBy = 'Name Here';
    const problemType = document.getElementById('problem-type').value;
    const callerName = document.getElementById('caller-name').value;
    const callerDept = document.getElementById('caller-ou').value;
    const callerRoom = document.getElementById('caller-room').value;
    const callerExt = document.getElementById('caller-ext').value;
    const assignedTo = document.getElementById('ticket-assigned-to').value;
    const dateAssigned = timeStamp;
    const problemDesc = document.getElementById('problem-desc').value;

    ticketColValues = [ticketId, dateTimeEntered, enteredBy, problemType, callerName, callerDept, callerRoom, callerExt, assignedTo, dateAssigned, problemDesc]

    //existing elements constants
    const ticketGrid = document.getElementById('tickets-grid');

    //new element constants
    const newTicketRow = document.createElement('div');
    const col1 = document.createElement('div');
    const col2 = document.createElement('div');
    const col3 = document.createElement('div');
    const col4 = document.createElement('div');
    const col5 = document.createElement('div');
    const col6 = document.createElement('div');
    const col7 = document.createElement('div');
    const col8 = document.createElement('div');
    const col9 = document.createElement('div');
    const col10 = document.createElement('div');
    const col11 = document.createElement('div');

    ticketColDivs = [col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11];

    ticketGrid.append(newTicketRow);
    for (x=0; x<11; x++) {
        newTicketRow.append(ticketColDivs[x]);
        ticketColDivs.forEach(col => {
            col.innerText = ticketColValues[x];//need to match col array # with value array #
        });
        console.log(x);
    };
    
    newTicketModal.classList.remove('active');
    overlay.classList.remove('active');

    ticketIdBase++;
});

.header, .functions-bar, .content-container, #tickets-header, .ticket-header-col-container, .footer, .main-nav, .banner, .header-buttons, #header-left, #tickets-grid > div, #new-ticket-form {
    display: flex;
}

.ticket-header-col-container, .ticket-item-col-container {
    padding: 0 1em 0 1em;
}

.ticket-header-col-container {
    justify-content: space-between;
}

#ticket-id-header, /*#ticket-id-number*/ #tickets-grid div div:first-child {
    width: 3%;
}

#date-time-header, /*#ticket-date-time*/ #tickets-grid div div:nth-child(2) {
    width: 10%;
}

#entered-by-header, /*#ticket-entered-by*/ #tickets-grid div div:nth-child(3) {
    width: 10%;
}

#problem-type-header, /*#ticket-problem-type*/ #tickets-grid div div:nth-child(4) {
    width: 7%;
}

#caller-name-header, /*#ticket-caller-name*/ #tickets-grid div div:nth-child(5) {
    width: 10%;
}

#caller-dept-header, #tickets-grid div div:nth-child(6) {
    width: 5%;
}

#caller-location-header, /*#ticket-caller-location*/ #tickets-grid div div:nth-child(7) {
    width: 7%;
}

#caller-ext-header, /*#ticket-caller-ext*/ #tickets-grid div div:nth-child(8) {
    width: 3%;
}

#assigned-to-header, /*#ticket-assigned-to*/ #tickets-grid div div:nth-child(9) {
    width: 10%;
}

#date-assigned-header, /*#ticket-assigned-date*/ #tickets-grid div div:nth-child(10) {
    width: 10%;
}

#problem-desc-header, /*#ticket-problem-desc*/ #tickets-grid div div:nth-child(11) {
    width: 30%;
}

<div id="tickets-grid">
                <div class="new-ticket">
                    <div class="ticket-item-col-container" id="">
                        <p>test</p>
                    </div>
                    <div class="ticket-item-col-container" id="">
                        <p>test</p>
                    </div>
                    <div class="ticket-item-col-container" id="">
                        <p>test</p>
                    </div>
                    <div class="ticket-item-col-container" id="">
                        <p>test</p>
                    </div>
                    <div class="ticket-item-col-container" id="">
                        <p>test</p>
                    </div>
                    <div class="ticket-item-col-container" id="">
                        <p>test</p>
                    </div>
                    <div class="ticket-item-col-container" id="">
                        <p>test</p>
                    </div>
                    <div class="ticket-item-col-container" id="">
                        <p>test</p>
                    </div>
                    <div class="ticket-item-col-container" id="">
                        <p>test</p>
                    </div>
                    <div class="ticket-item-col-container" id="">
                        <p>test</p>
                    </div>
                    <div class="ticket-item-col-container" id="">
                        <p>test</p>
                    </div>
                </div>
            </div>

Solution

How about just creating your new row from the values you receive? You now create a lot of manual rows, where in the end you repeat a lot of items.

So with the premise that you have this, and they are in the correct order:

ticketColValues = [ticketId, dateTimeEntered, enteredBy, problemType, callerName, callerDept, callerRoom, callerExt, assignedTo, dateAssigned, problemDesc]

Then why not just loop ticketColValues and creating the rows dynamically setting the values?

const container = document.getElementById('container');

const ticketColValues = ['ticketId', 'dateTimeEntered', 'enteredBy', 'problemType', 'callerName', 'callerDept', 'callerRoom', 'callerExt', 'assignedTo', 'dateAssigned', 'problemDesc'];

const newRow = ticketColValues.reduce( ( targetElement, value ) => {
  const col = document.createElement('div');
  col.innerHTML = value;
  targetElement.appendChild( col );
  return targetElement;
}, document.createElement('div') );

container.appendChild( newRow );

<div id="container"></div>

In this case I've used reduce, but a simple for loop would do just fine as well. Unless there is a specific reason you want to manually create all the columns?