How to implement Jquery Ajax in success?

How to implement Jquery Ajax in success in this example?

I click on Getcat is completed. Similar but I click in Cat 1, Cat 2 ... then fail.?

I am sure it is easy but still learning some of the basics here. Thanks

This is cat.php

<div class="cat">
  <div data-id="4" class="catget">Cat 4</div>

  <div data-id="5" class="catget">Cat 5</div>

  <div data-id="6" class="catget">Cat 6</div>

  <div data-id="7" class="catget">Cat 7</div>

  <div data-id="8" class="catget">Cat 8</div>
</div>

This is index.php

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script> $('.catget').click(function() {
var id = $(this).parent().data('id');
          $.ajax({
            url: 'cat.php',
            data: {
              "id": id
            },
            type: 'post',
            success: function(result) {
              var $response = $(result);
              var cat = $response.filter('.cat').html();
              $('.catsub').html(cat).fadeIn(700);
            }
          });
        });</script>
        <div data-id="1" class="catget">Getcat</div>
        <div class="catsub">Cat List</div>

Run Code Snippet.

 $('.catget').click(function() {
   var id = $(this).parent().data('id');
   $.ajax({
     url: 'cat.php',
     data: {
       "id": id
     },
     type: 'post',
     success: function(result) {
       var $response = $(result);
       var cat = $response.filter('.cat').html();
       $('.catsub').html(cat).fadeIn(700);
     }
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div data-id="1" class="catget">Getcat</div>
<div class="catsub">Cat List</div>