I am making calculator where someone can add and remove input fields using JavaScript. I've implemented a flexbox layout for the section that contains the input fields and buttons. The current CSS structure places all elements (input fields and buttons) in a column because the parent container is set to flex-direction: column;.
The problem is that this makes my buttons to be in a column as well and I want it to be horizontally aligned. I can't wrap the buttons in a div since it will interfere with my javascript.
function addClass(){ let container = document.getElementById("input-field-1").parentNode; let fieldLength = container.getElementsByClassName("inputfield").length; let inputField = document.getElementById("input-field-1"); let clone = inputField.cloneNode(true); clone.id = "input-field-"+ (fieldLength + 1); let classNumber = fieldLength + 1; let inputs = clone.getElementsByTagName("input"); inputs[0].placeholder = "Class "+ classNumber; inputs[0].value = ""; inputs[1].value = ""; inputs[2].value = ""; let addButton = document.getElementById("add-btn"); container.insertBefore(clone, addButton);}.semester-calc { display: flex; align-items: center; flex-direction: column;}<div class="semester-calc"><div class="inputfield" id="input-field-1"><input class="class-name" type="text" placeholder="Class 1"><input class="grade-val" type="text" placeholder="Grade"><input class="credit-val" type="text" placeholder="Credits"></div><!-- Additional input fields --><button id="add-btn" onclick="addClass()">Add Class</button><button id="remove-btn" onclick="remove()">Remove Class</button><button id="clear-btn" onclick="clearClass()">Clear Classes</button><button id="calculate-gpa" onclick="calculate()">Calculate!</button></div>Problem: I want the buttons to align horizontally below the input fields but the flexbox makes them align in a column. Putting it in a div seems to interfere with my javascript parent container setup so I dont want to do this. Is there a way I can align the buttons horizontally without altering my javascript or do I have to just redo my addClass function?