How to do dynamic design using jquery

See more:

Javascript

HTML

PHP

jQuery

I am doing filtration in my project. So, for that I want to create design dynamically, below two code snippet shown. First code is of simple HTML code which design I want to develop dynamically. and second is the script. In the script there are only table row and table data is created but as per my design I want div also generated dynamically.

Code for design:

<div class="usedcarinfo">
    <div class="carimagediv">
      <img src="images/banner3n.jpg" class="carimage" />
      <img src="images/camera.fw.png"  class="camera" />
      <p class="camerafont">5 Photos</p>
    </div>

<div style="float:left">
    <p class="carinfofont"><b>2010 Holden Commodore SV6</b> </p>
</div>

<div  class="carinfoline">
</div><br /><br />

<div style="float:left">
   <table>
     <tr>
        <td>
           <img src="images/km.fw.png" style="margin-left:15px; margin-top:0px" />
        </td>
        <td>
           <p class="modelfont" style="margin-left:10px; margin-top:10px"><b>$10,000</b></p>
        </td>
        <td>
           <img src="images/car.fw.png" style="margin-left:30px; margin-top:5px"  />
        </td>
        <td>
           <p class="modelfont" style="margin-left:10px; margin-top:15px" ><b>2010 Model</b></p>
         </td>
     </tr>
     <tr>
         <td>
            <img src="images/petrol.fw.png" style="margin-left:15px; margin-top:-25px"  />
         </td>
         <td>
            <p class="modelfont" style="margin-left:10px; margin-top:-20px"><b>Unleaded</b></p>
         </td>
         <td>
            <img src="images/company.fw.png" style="margin-left:30px; margin-top:-25px"  />
         </td>
         <td>
            <p class="modelfont" style="margin-left:10px; margin-top:-20px" ><b>Karma</b></p>
         </td>
         <td>
            <p  class="driveawayfont"  style="margin-left:100px; margin-top:-5px" ><b>Drive
             Away</b></p>
            <p  class="pricefont" style="margin-left:100px; margin-top:-10px" ><b>$19,690 </b>
             </p>
         </td>
         <td>
            &nbsp;&nbsp; <a href="#"><img src="images/inquiry.fw.png" /></a>
         </td>
      </tr>
      <tr>
         <td>
            <img src="images/speed.fw.png"  style="margin-left:15px; margin-top:-25px"  />
         </td>
         <td>
             <p class="modelfont" style="margin-left:10px; margin-top:-20px" ><b>5 Speed
              Manual</b></p>
         </td>
         <td>
             <img src="images/view.fw.png" style="margin-left:30px; margin-top:-25px"   />
         </td>
         <td>
             <p class="modelfont" style="margin-left:10px; margin-top:-20px" ><b>View Detail</b>
             </p>
         </td>
      </tr>
  </table>

</div>
<div class="usedcarline" style="float:left; width:760px; margin-top:20px ;margin-left:-25px">
</div>
</div> <!-- end usedcarinfo-->

My script:

  <script src="http://code.jquery.com/jquery-latest.js"></script> 
   <script>
      function makeTable(data){
        var tbl_body = "";
        $.each(data, function() {
          var tbl_row = "";
          $.each(this, function(k , v) {
             tbl_row += "<td style='color:red;'>      "+v+"</td>";  
          })
        tbl_body += "<tr>"+tbl_row+"</tr>";
        })
       return tbl_body;
      }

  function getusedcarFilterOptions(){
    var opts = [];
    $checkboxes.each(function(){
      if(this.checked){
        opts.push(this.name);
    }
    });
  return opts;
 }

  function updateusedcar(opts){
    $.ajax({
      type: "POST",
      url: "filter.php",
      dataType : 'json',
      cache: false,
      data: {filterOpts: opts},
      success: function(data){
        $('#snowboards tbody').html(makeTable(data));
      }
    });
  }

  var $checkboxes = $("input:checkbox");
  $checkboxes.on("change", function(){
    var opts = getusedcarFilterOptions();
    updateusedcar(opts);
  });

  updateusedcar();
</script>  

Thanks in advance.