title: How to draw HTML class cards
body: <p>I need to use HTML class cards to show certain data on my page.</p>
  
  <p>This is the style that I'm using.</p>
  
  <pre><code>&lt;style&gt;
  .column {
    float: left;
    width: 25%;
    padding: 0 10px;
  }
  
  .row {margin: 0 -5px;}
  
  .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 16px;
    text-align: center;
    background-color: #f1f1f1;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>This is the HTML code that I'm using to draw the card.</p>
  
  <pre><code>&lt;div class="col-md-8"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="column"&gt;
                      &lt;div id="roomList" class="card"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I'm using ajax to load the data from SQL. After the data is loaded to ajax the data is appended to the roomList in order to create the card. </p>
  
  <pre><code> $.ajax({
          url: '/HouseKeeping/OutOfOrderTXN/RoomList',
          dataType: 'json',
          method: 'GET',
          success: function (data) {
              debugger;
              $.each(data, function (index, eachRoomList) {
                  $('#roomList').append( 
                      '&lt;div class="row"&gt;&lt;div class="column"&gt;&lt;div class="card"&gt; data-room-id="' + eachRoomList.Id + '" data-room-name="' + eachRoomList.RoomName + '"&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&gt;');
              })
          },
          error: function (error) {
  
          }
      });
  </code></pre>
  
  <p><code>+ eachRoomList.RoomName +</code> The data which is loaded to this are eg=100,101,102</p>
  
  <p>But it doesn't work. Below is a picture of how my class card is drawn.</p>
  
  <p>The data is not shown inside the class 'card' for eg-100 should be shown inside the class 'card'
  whats wrong with my code.I'm a beginner so help me pls</p>
  
  <p><a href="https://i.stack.imgur.com/w7NKa.jpg" rel="nofollow noreferrer">enter image description here</a></p>