hide content after click "more"

My HTML Code is like this :

    ...
         @foreach($hotel as $key=>$value)    
        ...
             <div class="iteration">
               <input type='hidden' value='<?php  echo $value['HCode'].'#'.$value['HName'].'#'.$value['CheckIn'].'#'.$value['CheckOut']   ?>' id='tes'>
        ...

    ...
           {{ $value['HotelNo'] }}      
           {{ $value['HotelName'] }}
    ...     
           <button class="save">More</button>

           <div class="loading"></div>    
    ...   </div>
        @endforeach
    ...

My Javascript Code is like this :

$(function(){
    $('.save').click(function () {
        var $parent = $(this).closest('div.iteration');
        var bla = $parent.find('.tes:first').val();
        console.log(bla);
        $parent.find('.loading').html('<img src="http://ift.tt/1PwvLqC"> loading...');

        $.ajax({
            type: "GET",
            url: "hotel-detail",
            success: function (response) {
                var elem = $parent.find('.loading').empty();  //remove org content
                for(var i=0; i<response.SearchAvailResponse.Hotel.length; i++){  //make sure to use var
                    elem.append("<p>" + response.SearchAvailResponse.Hotel[i].HotelNo + "</p>");  //add the new content
                }
            }
        });  
    });
});

When click the "more" button, the system displays the content with the loading process. I want when click the "more" button again, the system hide the content. So when click "more" button, the system displays the contents of the loading process. When click "more" button again, the system hide the content. And so on

How hidden the content after click "more" button?

Any solution to solve my problem?

Thank you very much

via Chebli Mohamed