Как добавить DIV для строки в JQuery?

Question

При нажатии на какую-то кнопку я хочу добавить div с использованием идентификатора, и я хотел бы отображать добавленные элементы каждый раз в строке, максимум 6 элементов подряд. Код ниже добавляет каждый раз снизу, а не по горизонтали. Как я могу добавить, как показано ниже скриншот?

html:

<div id="dashboardArea" class="wrapper">
</div>

jquery код:

$(document).ready(function(){
$("#saveProjecttoDash").click(function() {
    $('#overlay').fadeOut(300);
    let projectName = document.getElementById("enterprojectName").value;
    let clientName = document.getElementById('clientNametochoose').value;
    var someDiv = '<div class="row"><div class="pull-bottom" style="height:500px;background:#e3e8e7">'+projectName+'<br>'+clientName+'</div></div>';
    $('#dashboardArea').append(someDiv);
  });
});

// css для следующего класса:

.pull-bottom {
width: 22%;
margin: 10px 0px 0px 100px;
vertical-align: bottom;
float: none;
    webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 3em;
     -moz-column-gap: 3em;
          column-gap: 3em;
}

Answer 1

Может быть, с помощью сетки вы можете получить 6 ячеек.

$(document).ready(function() {

  $("#save").on("click", function() {
    if ($('#area').children().length == 6)
      return;
    $("<div>", {
      class: "cell",
      append: `Column - ${$('#area').children().length + 1}`,
      appendTo: "#area"
    })
  });

});

* {
  margin: 0;
  box-sizing: border-box;
}

#area {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
}

.cell {
  background: #fafafa;
  height: 50px;
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="save">SAVE</button>

<div id="area"></div>

Answer 2

В вашем pull-bottom CSS-классе свойство float в этом случае должно быть left.

В текущем состоянии каждая строка будет иметь полную ширину.

Скрипка: https://jsfiddle.net/fh42xatu/

Answer 3

Вы можете использовать flex:

const NewClientProject = (pName, cName) => {
  return $("<div>", {
    class: "cell",
    append: `${pName||"Project Name"}<br>${cName||"Client Name"}`,
    appendTo: "#dashboardArea"
  });
}

jQuery( $ => {

  $("#toDashboard").on("click", function() {
    $('#overlay').fadeOut(300);
    NewClientProject($("#pName").val(), $('#cName').val());
  });
  
});

NewClientProject();
NewClientProject();

* {margin:0; box-sizing:border-box;}

#dashboardArea {
  display: flex;
  flex-flow: row wrap;
}

#dashboardArea .cell {
  background: #e3e8e7;
  flex: 0 0 22%;
  margin: 1% 1.5%;
  min-height: 140px;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="pName" placeholder="Project Name" type="text">
<input id="cName" placeholder="Client Name" type="text">
<button id="toDashboard">Save to Dashboard</button>

<div id="dashboardArea"></div>