Why do I have only 1 gif per page instead of multiple gifs?

I am new to jQuery and I am trying to figure out how I can get multiple gifs to show up on a page after typing in a keyword and clicking 'submit'. In my api key I thought setting the number for 'limit=10'(10 for example) is suppose to have 10 gifs per page?

$('#searchgifs').on('click', function() {
    var input = $('#search').val();
    $.get('https://api.giphy.com/v1/gifs/search?q=' + input + '&api_key=apikey&limit=10', function(response) {
      $('#img').html("<img src=" + response.data[0].images.downsized_large.url + ">")
    })
  });

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    
</head>
<body>
<input id="search" class="form-control mr-sm-2" type="text" placeholder="Search" value="">
<button class="btn btn-outline-success my-2 my-sm-0" id="searchgifs" type="submit">Search</button>
<div id="img">
    
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>   
<script src="scripts/script1.js"></script>
</body>
</html>

Solution

It seems like you have two issues: The first one is that you only set one of the results to the element, and the second is that you set the content of the element to be the content of the first result, instead of appending it. Below snippet should work .

The two changes I made:

Using the $.each() function to do something with ALL of the results instead of only 1 by using an array key
Using the .appendTo() function to add content to a certain element instead of setting the content. The first ADDS content, the later overwrites the current value.

$('#searchgifs').on('click', function() {
    var input = $('#search').val();
    $.get('https://api.giphy.com/v1/gifs/search?q=' + input + '&api_key=apikey&limit=10', function(response) {
      $.each(response.data, function(index, gif){
      $("<img src=" + gif.images.downsized_large.url + ">").appendTo(('#img'))
      });
      
    })
  });

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    
</head>
<body>
<input id="search" class="form-control mr-sm-2" type="text" placeholder="Search" value="">
<button class="btn btn-outline-success my-2 my-sm-0" id="searchgifs" type="submit">Search</button>
<div id="img">
    
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>   
<script src="scripts/script1.js"></script>
</body>
</html>