title: Generate html from JS
body: <p>I have the following snippet:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getAllRecipes(){
    $.ajax({
      type: "GET",
      url: "https://api.npoint.io/7493fda05b8038212eed",
      beforeSend: function() {
        $("#AllRecipe").html('Fetching...')
      },
      success: function(json) {
      $("#AllRecipe").html('')
  
        if(!json.hasOwnProperty('error')){
        
          var add_html = '';
          var count_page = 1;
          $(json).each(function (new_i, new_val) {
  
  
            if(new_val.calorique == 1){
              var sport_recipe = '&lt;span class="badge badge-pill badge-theme-1 position-absolute badge-top-left"&gt;SPORT&lt;/span&gt;';
            }else{
              var sport_recipe = '';
            }
            var total_time = new_val.recipe_time + new_val.recipe_time_cooking;
  
            if(new_i == 0){
              var count = 0;
              add_html += '&lt;div id="1" class="row list disable-text-selection pagination_cont active"&gt;';
            }
            if (new_i % 8 == 2) {
              var count = 0;
              count_page = count_page + 1;
              add_html += '&lt;div id="'+count_page+'" class="row list disable-text-selection pagination_cont"&gt;';
            }
            count = count + 1;
  
  
  
  
  
  
            add_html += '&lt;div class="col-xl-3 col-lg-4 col-12 col-sm-6 mb-4"&gt;&lt;div class="card"&gt;&lt;div class="position-relative"&gt;&lt;a href="/recipes_details.php?recipeid='+new_val.id+'"&gt;&lt;img class="card-img-top" src="'+new_val.image+'" alt=""&gt;&lt;/a&gt;'+sport_recipe+'&lt;/div&gt;&lt;div class="card-body"&gt;&lt;div class="row"&gt;&lt;div class="col-10"&gt;&lt;a href="/recipes_details.php?recipeid='+new_val.id+'"&gt;&lt;p class="list-item-heading mb-4 pt-1 first_uppercase"&gt;'+new_val.name+'&lt;/p&gt;&lt;/a&gt;&lt;footer&gt;&lt;p class="text-muted text-small mb-0 font-weight-light"&gt;&lt;span style="margin-left: 2em" class="inline-flex"&gt;&lt;svg style="width: 20px; height: auto" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"&gt;&lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;span class="ml-1"&gt;'+total_time+' min&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/footer&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
  
            if(count == 8){
  
            }
            if (new_i % 8 == 2) {
              add_html += '&lt;/div&gt;';
            }
            if(new_i == 0){
              add_html += '&lt;/div&gt;';
            }
          });
          $("#AllRecipe").html(add_html)
  
        }
  
  
  
         }
       });
    }
    
    $( document ).ready(function() {
    getAllRecipes();
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"&gt;
  &lt;div id="AllRecipe"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm getting the following result :</p>
  <pre><code>&lt;div id=&quot;AllRecipe&quot;&gt;
     &lt;div id=&quot;1&quot; class=&quot;row list disable-text-selection pagination_cont active&quot;&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;div id=&quot;2&quot; class=&quot;row list disable-text-selection pagination_cont&quot;&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;div id=&quot;3&quot; class=&quot;row list disable-text-selection pagination_cont&quot;&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My expected result:</p>
  <pre><code>&lt;div id=&quot;AllRecipe&quot;&gt;
     &lt;div id=&quot;1&quot; class=&quot;row list disable-text-selection pagination_cont active&quot;&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div id=&quot;2&quot; class=&quot;row list disable-text-selection pagination_cont&quot;&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-xl-3 col-lg-4 col-12 col-sm-6 mb-4&quot;&gt;&lt;/div&gt;
     &lt;/div&gt;       
  &lt;/div&gt;
  </code></pre>
  <p>How can I add 8 elements inside the .row .list class and create a new block ?</p>