Problem calling every item using jQuery

Question

I am trying to create a new div element and then change its position using Jquery.But J only calls the first element. I want to change the position of all elements with a different number.

<div class="userList">
<?php $categories = find_category();

    foreach($categories as $category): ?>
<div id="user">
 <img id="<?php echo $category['cat_id']; ?>" src="<?php echo $category['cat_image']; ?>" />
 <a></a>
</div>
 <?php endforeach ;?>
</div>

If I do in jQuery like

 var a= 60;
$(".userList").children().css({'left':a+'px' ,'top':a+'px'});
  a+=60;

This changes everything <div id="user">to <div id="user" style="left: 60px; top: 60px; "> But I need to do the first on the left: 60px top: 60px, and the next on the left: 120px top: 120px.

I also used a feature like

$(".userList").each(function(){

    $("#user").css({'left':a+'px' ,'top':a+'px'});
                a+=60;

                });

But this time, only the first one <div id="user">has changed to <div id="user" style="left: 60px; top: 60px; ">, and the other has not been executed.

Answer 1

-, , ID . user .

, .each() 60 index ( ).

60, 120, 180, 240 ..

var a= 60;
$(".userList").children().each(function( idx ) {
    var position = a * (idx + 1);
    $(this).css({'left': position ,'top': position});
});

Answer 2

, css, , ? , , a = 60. .