How to combine 2 divs in jquery?

Question

Here is what I have. enter image description here #Image is working ok, but #act not. #act should write ACTION on bottom of every article(image) that meets requirment of Servlet (if data!=null). Unfortunately, I have ActionAction on bottom of first image. What should I correct? And sorry for my bad English.

for(var i = 0; i<data.length; i++){                             
  $("#image").append(
    "<div class=divovi id="+data[i].sifra+">" +
    "<div><img width=150 height=150 border=2 align=middle id=\"slikaID\" src="+data[i].slika+" /></div>" +
    "<div>"+data[i].naziv+"</div><div id=act></div></div>"
  );
  $.post("http://localhost:8080/Projekat/DaLiJeNaAkcijiServlet",
    {
      data:JSON.stringify({ naslov:data[i].sifra})
    },
    function(data,status){
      if(data!=null) {
        $("#act").append('ACTION');
      }
    }   
  );
}

Answer 1

HTML ID's need to be unique, ie used once.

If you change "<div>"+data[i].naziv+"</div><div id=act></div></div>"); to "<div>"+data[i].naziv+"</div><div class=act></div></div>"); (and update your CSS accordingly) you should then be able to use $(".act").append('ACTION'); just once to append to all divs with that class - so be sure it's not in a loop otherwise many 'ACTIONS' may appear.

Answer 2

An id is unique to only one element. Use classes instead.

for(var i = 0; i<data.length; i++){                             
                                $("#image").append(
                                        "<div class=divovi id="+data[i].sifra+">" +
                                        "<div><img width=150 height=150 border=2 align=middle id=\"slikaID\" src="+data[i].slika+" /></div>" +
                                        "<div>"+data[i].naziv+"</div><div class='act'></div></div>");   // id=act => class='act' 

                                $.post("http://localhost:8080/Projekat/DaLiJeNaAkcijiServlet",
                                        {

                                        data:JSON.stringify({
                                            naslov:data[i].sifra
                                        })
                                        },
                                        function(data,status){ 
                                            if(data!=null) {
                                                $(".act").append('ACTION'); // #act => .act

                                            }

                                        }           
                                );

                            }

To learn more about when to use Ids and when to use Classes check out this post.

Answer 3

You are putting an ajax request within the loop, which is really not recommended. Unless you want your server to suffer from DDOS sympton sooner or later.

You are also missing individual IDs for the act div, which is the main cause of your problem.

for(var i = 0; i<data.length; i++){                             
  $("#image").append(
    "<div class=divovi id="+data[i].sifra+">" +
    "<div><img width=150 height=150 border=2 align=middle id=\"slikaID\" src="+data[i].slika+" /></div>" +
    "<div>"+data[i].naziv+"</div><div id='act+"i"'></div></div>"
  );
}
$.post("http://localhost:8080/Projekat/DaLiJeNaAkcijiServlet",
    {
      data: JSON.stringify({ naslov:data })
    },
    function(data,status){
      for(var i = 0; i<data.length; i++) {
         if(data[i].sifra!==null) {
           $("#act"+i).HTML('ACTION');
         }
      }
    }   
);