Rotate array element using jquery

Question

I have array of angles and I wanted to loop each angle and display different direction of css class in each row table. But, the loop does not display different direction. I tried this code, but it only show one direction if i call the function outside the loop and it does not show any direction if i call the function inside the loop. I am not sure how to connect to each angles and css class element. Example in row one i want element point to 90 degree, in row two 45 degree ....line 6 point to 60 degree

    var angle = [90, 45, 170, 180, 270, 60]
    list = ''; 

    for (i = 0; i < 6; ++i){
          list += '<tr>'; 
          list +='<td>'+ "<div class='fa fa-angle-double-up'> </div>"
          list +='</tr>'; 
          rotate(angle[i]);  // not show any direction 
      }
     $('#imagetable > tbody').html(list); 


     function rotate (angle){
            $(".fa-angle-double-up").rotate(angle);
        }
     rotate(angle[i]);  // show  direction on the selected angle 

Answer 1

I believe it's because you call the rotate function before the elements have been added to the DOM. Try adding another loop directly after adding like so:

$("#imagetable > tbody").html(list);
for (i = 0; i < 6; ++i) {
    rotate(angle[i]);
}