Button not working with AJAX loaded content using jQuery?

Question

Each part loaded is going to have more information to view, I was hoping to have this done by using a button loaded with the content. As it is all loaded at once, I'm not sure how to have a button specific to each loop loaded and not generalized as one.

I've tried the following code below and it does not work. While using the button outside of the AJAX script - it works fine but again only for one and not for each loop the button is loaded with.

I'm making an application for the woman's world cup using an API.

    #more_info {
        display: none; /*style to hide the 'more info' as it is loaded*/
    }

<div id="matches"></div><!-- AJAX content is loaded here -->

<script>
$(document).ready(function() {
 $.getJSON("http://worldcup.sfg.io/matches", function(data){ 
     var group_data = '';
      $.each(data, function(key, value){
            group_data += '<div class="row">';
            group_data += '<div class="col">';
            group_data += '<h5>'+value.stage_name+'</h5>';
            group_data += '</div>';   
            group_data += '</div>'; 
            group_data += '<div class="row">';
            group_data += '<div class="col">';
            group_data += '<td>'+value.location+'</td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td>'+value.venue+'</td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td>'+value.home_team_country+'</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>'+value.home_team.goals+'</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td><p>-</p></td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>'+value.away_team.goals+'</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>'+value.away_team_country+'</td>';
            group_data += '</div>';
            group_data += '</div>';
            group_data += '<button>Show More</button>'; // button to show more info
            group_data += '<div id="more_info">';
            group_data += '<div class="row">';
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td>Test</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>Test</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';
            group_data += '</div>';    
            group_data += '</div>'; 
      });
      $('#matches').append(group_data);    
  });
 });
</script>

<script>
$( "button" ).click(function() {
  $( "#more_info" ).show(function() {
    // Animation complete.
  });
});  
</script>    

The data is loaded from the AJAX query, but the button doesn't work? Any ideas would be great, happy to answer any questions as I know I haven't explained this too well.

Answer 1

^{As I said} 1st: id should be unique so don't use same id for more than one element use classes instead.I talk here about #more_info you need to change it to class then in the click use $(this).next(".more_info").

2nd: Take a look at Event binding on dynamically created elements?

^{Please read //comments in the code}

<script>
$(document).ready(function() {
 $.getJSON("http://worldcup.sfg.io/matches", function(data){ 
     var group_data = '';
      $.each(data, function(key, value){
            group_data += '<div class="row">';
            group_data += '<div class="col">';
            group_data += '<h5>'+value.stage_name+'</h5>';
            group_data += '</div>';   
            group_data += '</div>'; 
            group_data += '<div class="row">';
            group_data += '<div class="col">';
            group_data += '<td>'+value.location+'</td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td>'+value.venue+'</td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td>'+value.home_team_country+'</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>'+value.home_team.goals+'</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td><p>-</p></td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>'+value.away_team.goals+'</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>'+value.away_team_country+'</td>';
            group_data += '</div>';
            group_data += '</div>';
            group_data += '<button>Show More</button>'; // button to show more info
            group_data += '<div class="more_info">'; // >>>>> change id to class <<<<<<<<
            group_data += '<div class="row">';
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td>Test</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>Test</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';
            group_data += '</div>';    
            group_data += '</div>'; 
      });
      $('#matches').append(group_data);    
  });

  // >>>>>>>>>>>>>>>>>>>> button click handler <<<<<<<<<<<<<<
  $(document).on("click" , "button" ,function() {
     $(this).next(".more_info").show(function() { // >>>>> use $(this).next(   <<<<<
        // Animation complete.
     });
  });  
 });
</script>