Duplicates images and other info $.each

Duplicates images and other info $.each

Hi, I'm recieving info from steam api and everything works good until I need to display the data using jquery. As u can see in this photo the 3 avatars are displayed. But in each column should be only one avatar, not all three.
Also as u can see the "STEAM nuoroda" repeats 3 times also. 



This is my html code:

  2. <div class="profiles col-md-4">
  4. <div class='userinfo'>
  6. </div>
  7. <p>Slapyvardis: <strong><span class="personaname"></span></strong></p>
  8. <p>Steam URL: <strong><span class="steamProfile"></span></strong></p>

  10. <p style="font-family: 'Roboto', sans-serif;"><button id="reason" data-toggle="modal" data-target="#reasonText{{$s->id}}" class="btn btn-danger"><i class="glyphicon glyphicon-film"></i> Rodyti priežastį</button>

  12. <button data-toggle="modal" data-target="#proofText{{$s->id}}" id="proof" class="btn btn-success">
  13. <i class="glyphicon glyphicon-camera"></i> <strong>Įrodymai</strong></button>

  15. <form id="voteUp" action="/minus-rep/{{$s->id}}" method="get">
  16. <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-thumbs-down"></i> <strong>Nerekomenduoti</strong></button>
  17. </form>

  19. </p>
  20. </div>

The app.js:

  2. $(document).ready(function(){

  4.     $.getJSON("/info.php", function(json){
  5.         $.each(json, function(i, player){
  6.        $('.userinfo').append('<img style="width: 100px; height: 100px" style="width: 100px; height: 100px" src="'+player.response.players[0].avatarfull+'">');
  7.        $(".steamProfile").append('<a href="'+player.response.players[0].profileurl+'">STEAM nuoroda</a>');
  8.        $(".personaname").append(player.response.players[0].personaname);
  9.        });
  10.        
  11.     });
  12. });