duplicate containers on bottom instead of right-CodePudding

hi im writting this simple website and I can't get the duplicate to appear on the bottom of the previous one in the following link is 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 >
    <div >
      <button id="NewBTN" onclick="duplicate()">Nuevo</button>
    </div>

    <div  id="duplicater">
      <div  id="ItemCode">
        <Label id="etItCode">Código de producto</label>
        <select>
          <option>1</option>
          <option>222222</option>
        </select>
      </div>

      <div  id="Desc">
        <label id="etDesc">Descripción de producto</label>
        <select>
          <option>Lorem ipsum</option>
        </select>
      </div>

      <div  id="FechaReq">
        <label id="etFecha">Fecha requerida</label>
        <input type="date" id="fechareq" name="FechaReq">
      </div>

    </div>

  </div>

  <h3> En caso de no encontrar el producto solicitar su creación y reintentelo.</h3>
</main>

Basically I'm trying to duplicate the form's rows to include more items and these rows should be aligned.

I've tried float, relative position, width max, none have worked so far.

Thank you in advance.

CodePudding user response：

Nothing is wrong with your JavaScript code. The problem is from the CSS.

I removed this line of code from your CSS display: grid; under the .grid-container-1 selector and the duplicated form shows right below the previous one.

So your CSS for the .grid-container-1 selector should be like this:

.grid-container-1 {
    max-width: 480px;
    grid-auto-columns: repeat(3, 1fr);
    grid-template-areas: "nuevo content .";
}

CodePudding user response：

document.querySelector('button#NewBTN').onclick = function(e){
    var parent = e.target.parentElement;
      var innerElement = `<div  id="ItemCode">
              <Label id="etItCode">Código de producto</label>
              <select>
                <option>1</option>
                <option>222222</option>
              </select>
            </div>
            <div  id="Desc">
              <label id="etDesc">Descripción de producto</label>
              <select>
                <option>Lorem ipsum</option>
              </select>
            </div>
            <div  id="FechaReq">
              <label id="etFecha">Fecha requerida</label>
              <input type="date" id="fechareq" name="FechaReq">
            </div>`;
      var div = document.createElement('div');
      div.classList.add('ProdRow');
      div.innerHTML = innerElement;
      parent.appendChild(div)
      //console.log(parent.innerHTML)
}

h1 {
  text-align: center;
}

h3 {
  text-align: center;
  color: red;
  font-size: 13;
}

.grid-container-1 {
  display:flex;
  flex-direction:column;
}

.New-item > button{
  margin-bottom:10px;
  padding: 6px 10px;
  background: coral;
  color: #fff;
  border-color: coral;
  border-radius: 4px;
}

.New-item > button:focus,
.ProdRow select,
.ProdRow input{
  outline:none;
}

.ProdRow {
  display:flex;justify-content:space-between;
  background-color: #ebebeb;
  padding: 10px;
  margin-bottom:5px;
  
}

.selector {
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 0 5px;
  width: 150px;
  position: relative;
}

.selector label {
  font-size: 10px;
  text-transform: upper;
  color: #444;
  margin: 0 0 5px;
  position: relative;
}

.ProdRow select,
.ProdRow input{
  padding:6px 10px;
  border-radius:4px;
  border:1px solid #999;
}

<main id="main">
  <H1 id="titulo">Portal de solicitud de compra</h1>

  <div >
    <div >
      <button id="NewBTN">Nuevo</button>
    </div>

    <div >
      <div  id="ItemCode">
        <Label id="etItCode">Código de producto</label>
        <select>
          <option>1</option>
          <option>222222</option>
        </select>
      </div>

      <div  id="Desc">
        <label id="etDesc">Descripción de producto</label>
        <select>
          <option>Lorem ipsum</option>
        </select>
      </div>

      <div  id="FechaReq">
        <label id="etFecha">Fecha requerida</label>
        <input type="date" id="fechareq" name="FechaReq">
      </div>
    </div>
  </div>

  <h3> En caso de no encontrar el producto solicitar su creación y reintentelo.</h3>
</main>

Try this example to resolve your problem and let me know your thought