cool rock cool rock - 2 months ago 8
HTML Question

How to create multiple sub div tags in jQuery

Here is working code ,like this i want --see pic for Output
there is place between two image and add wish bottom

i try to get the same thing using jQuery but the problem here is there is no place between two image and no add wish at the bottom

there is no place between two image and no add wish bottom


Like @Evil Saied, you have some problems in your code. The worst is the duplicates ids.

If I understand you correctly, the relevant problem is that you added the classes to the wrong element (.product-image-wrapper for example).

The problem


You can see that the class product-image-wrapper added to the #col but not to the new div that you just create.

The solution


In other words, you need to move the ) to the end.

I removed the not relevent part of the css so I could create is as snippet, in the future, please include only the relevant code so it will easier for us to help you.

  var numbers = [1,2,3,4,5,6];
    $("#singlePro").append($("<div></div>").addClass("productinfo text-center").attr("id","productCentre"));
    $("#productCentre").append('<img src="" alt="" />\
<p>Easy Polo Black Edition</p>\
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>')

    $(".product-loop div:eq(0)").after("<div></div>").addClass("choose").attr("id","chse");
    $("#chse").append('<ul class="nav nav-pills nav-justified">\
<li><a href=""><i class="fa fa-plus-square"></i>Add to wishlist</a></li>\
<li><a href=""><i class="fa fa-plus-square"></i>Add to compare</a></li>\
@import url(,300,400italic,500,700,100);
@import url(,800,300,600,700);
@import url(;

.product-image-wrapper {
  border: 1px solid #F7F7F5;
  overflow: hidden;
  margin-bottom: 30px;

body {
  font-family: 'Roboto', sans-serif;
  position: relative;

ul li {
  list-style: none;

a:hover {
  outline: none;

a:focus {
  outline-offset: 0;

a {
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif;

  outline: none;
  box-shadow: none;

.navbar-toggle {
  background-color: #000;

a#scrollUp {
  bottom: 0px;
  right: 10px;
  padding: 5px 10px;
  background: #FE980F;
  color: #FFF;
  -webkit-animation: bounce 2s ease infinite;
  animation: bounce 2s ease infinite;

a#scrollUp i{
  font-size: 30px;
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>

  <div class="container">
    <div class="row">
      <div class="col-sm-9 padding-right">
        <div class="features_items">
          <h2 class="title text-center">Features Items</h2>
          <div class="product-loop">