Hey there! I'm currently working on a simple website and I'm having trouble getting the duplicated form rows to appear aligned below the previous one. Here's what I have right now:
var i = 0;
var original = document.getElementById("duplicater");
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "duplicater" + ++i;
original.parentNode.appendChild(clone);
}h1 {
text-align: center;
}
h3 {
text-align: center;
color: red;
font-size: 13;
}
.grid-container-1 {
display: grid;
max-width: 480px;
grid-auto-columns: repeat(3, 1fr);
grid-template-areas: "nuevo content .";
}
.ProdRow {
display: grid;
max-width: 480px;
grid-area: content;
grid-auto-columns: repeat(3, 1fr);
grid-template-areas: "code desc date";
position: relative;
float: down;
}
.selector {
border-radius: 4px;
margin-bottom: 10px;
padding: 0 5px;
width: 150px;
background-color: #ebebeb;
position: relative;
}
.selector label {
font-size: 10px;
text-transform: upper;
color: #777;
padding: 2px 8px 0;
position: relative;
top: 6px;
}
.New-item {
grid-area: nuevo;
}
.ProdRow #ItemCode {
grid-area: code;
}
.ProdRow #Desc {
grid-area: desc;
}
.ProdRow #FechaReq {
grid-area: date;
}<main id="main">
<H1 id="titulo">Portal de solicitud de compra</h1>
<div class="grid-container-1">
<div class="New-item">
<button id="NewBTN" onclick="duplicate()">Nuevo</button>
</div>
<div class="ProdRow" id="duplicater">
<div class="selector" id="ItemCode">
<Label id="etItCode">Código de producto</label>
<select>
<option>1</option>
<option>222222</option>
</select>
</div>
<div class="selector" id="Desc">
<label id="etDesc">Descripción de producto</label>
<select>
<option>Lorem ipsum</option>
</select>
</div>
<div class="selector" id="FechaReq">
<label id="etFecha">Fecha requerida</label>
<input type="date" id="fechareq" name="FechaReq">
</div>
</div>
</div>
<h3> If you can't find the product, request its creation and try again.</h3>
</main>In essence, I'm attempting to duplicate the rows of the form to add more items while keeping them aligned. I've experimented with various CSS properties like float, relative positioning, and max-width but none seem to be effective so far.
I appreciate any help or suggestions you can provide. Thank you in advance!