title: dynamically create a bootstrap-4 row and append divs to it
body: <p>I am making a little gallery for myself, in which I can upload pictures. What I have been trying to achieve so far has been the following: I want to upload multiple pictures, but each picture should be set in a <code>&lt;div class="card"&gt;</code> (and then I create a <code>&lt;div class="card-body"&gt;</code> and append it to the card. and within the <code>&lt;div class="card-body"</code> the picture should be appended) and each card should have the class <code>col-md-4</code>. These cards are made dynamically. However whenever I try to do it without a row, it'll append each <code>div</code> underneath each other, since it's default <code>display</code> is <code>block</code>. Doing it with a <code>&lt;div class="row"&gt;</code> around it, hasn't gotten me any further, since it will create a row everytime it loops through the <code>FileList</code> object, therefore also placing the <code>&lt;div class="card"&gt;</code> underneath each other 
  again.</p>
  
  <p>So to sum it up in bullet points:</p>
  
  <p><strong><em>The problem:</em></strong></p>
  
  <p>whenever I loop through the pictures and dynamically create my <code>card</code> classes, I either end up creating for each <code>card</code> a new row, or I take out the row, but end up having the <code>div</code> aligned underneath each other, because of the default <code>display</code>.</p>
  
  <p><strong><em>What I have tried so far:</em></strong></p>
  
  <p>I tried using 2 display types (I already use display hidden for the divs so I can scroll them down) and then I also tried adding a <code>display: inline-block</code> to it, but according to this post: <a href="https://stackoverflow.com/questions/21960846/how-to-create-a-hidden-element-as-well-as-inline-block">how to create a hidden element as well as inline-block</a>
  that's considered, and I quote: <em>Setting it to be both inline-block and display:none is just nonsense.</em>
  It does the trick for me, but the scroll effect dissapears once I implement it, so it's not entirely what I am looking for.</p>
  
  <p>The reason I am looking for a row around it, is so I can place the <code>div</code> next to each other (for every 3 pictures I 'review'), with the intention of making all the <code>div</code> the same height, because right now they differ from height, based on the picture within the <code>div</code>.</p>
  
  <p><strong><em>What I am trying to achieve:</em></strong></p>
  
  <ul>
  <li>Create a row dynamically and append (dynamically) <code>div</code> to it with each having <code>col-md-4</code> as class.</li>
  </ul>
  
  <p><strong><em>How my code looks at the moment I am writing this:</em></strong></p>
  
  <pre><code>for (var i = 0; i &lt; input.files.length; i++) {
  
          let reader = new FileReader();
  
          //I am trying to append this row once, let it be filled with 3 div 
           (let's say I upload 3 pictures so I need 3 divs), each having col-md-4 and place it next to each other. When I upload a 4th picture, a new row should be appended with,
           which in turn will be able to hold up to 3 divs if needed (if I upload another 3 pictures)
  
          let row = document.createElement('div');
          row.setAttribute('class', 'row');
  
          let card = document.createElement('div');
              card.setAttribute('class', 'card col-md-4 imagePreviewCard');
  
          let header = document.createElement('div');
              header.setAttribute('class', 'card-header imagePreviewHeader');
  
  
          let namePicture = document.createElement('input');
              namePicture.setAttribute('type', 'text');
              namePicture.setAttribute('name', 'namePicture');
              namePicture.setAttribute('id', 'namePicture');
              namePicture.setAttribute('class', 'col-md-10');
              namePicture.setAttribute('placeholder', 'Title pic');
  
  
          let deleteButton = document.createElement('a');
              deleteButton.setAttribute('class', 'btn btn-danger fa fa-trash col-md-2');
  
          $(deleteButton).on('click', function() {
              $(this).closest('.card').slideUp();
  
              setTimeout(function(){ 
                  $(this).closest('.card').remove();
              }, 1000);
  
          });             
  
          $(header).append(namePicture, deleteButton);
  
          let body = document.createElement('div');
          body.setAttribute('class', 'card-body imagePreviewBody');
  
          $('#imgUploadBody').append($(card).append(header, body));
  
              setTimeout(function(){ 
                  $(card).slideDown();
              }, 600);
  
          let img = new Image();
              img.setAttribute('class', 'resizeForcer');
  
          reader.onload = function(e) {
              img.src = e.target.result;
              $(body).append(img);
          }
  
          reader.readAsDataURL(input.files[i]);
  </code></pre>