title: How to choose a selector that has a variable in it? (Javascript, jQuery, DOM)
body: <p>I have been struggling with this for days, I have a function that takes in an object and loops through it creating rows with display columns in it (bootstrap), so I am using jQuery in order to select an id with a value from the object itself and appending to it, but for some reason the id selector that contains the variable is not seen and does not append to the div with the id?</p>
  
  <pre><code>function add_to_page(product) {
   //this is the main row that will contain the columns
   var rows = $('&lt;div class="row" &gt;&lt;/div&gt;'); 
   for (var category in products) {
      for (var i = 0; i &lt; products[category].length; i++) {
        rows.append($("&lt;div id='" +products[category][i].id +"'&gt;&lt;/div&gt;").html($('&lt;img&gt;').attr('src', products[category][i].img)));
        //the below code is never executed it only creates the image and stops appending after that
        $('#' + products[category][i].id).append($('&lt;div class=name&gt;').text(products[category][i].name));
        $('#' + products[category][i].id).append($('&lt;div class=category&gt;').text(products[category][i].category));
        $('#' + products[category][i].id).append($('&lt;div class=price&gt;').text('Price: ' + products[category][i].price + 'L.E'));
        $('#' + products[category][i].id).addClass('col-md-3');
        //the below code is to create a new row after filling each row with 4 display columns 
        if ( i % 3 == 0 &amp;&amp; i != 0 ) {
          $('#content').append(rows.clone(true));
          rows = $('&lt;div class="row"&gt;&lt;/div&gt;');
        }
      }
    }
  }
  </code></pre>
  
  <p>here is the html i am trying to append to:</p>
  
  <pre><code>&lt;div class="container full-width"&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>i am calling the function normally , no error in the console</p>
  
  <pre><code>add_to_page(products);
  </code></pre>