Replace HTML content via jQuery AJAX request

I am trying to create an AJAX filter using jQuery and PHP. When my user selects an ingredient from the dropdown I look to see in my database if a recipe exists with that ingredient and if the user created the recipe. This query works perfectly and allows me to loop through and create HTML for each recipe. I want to update the HTML via AJAX. At the moment I have this for my AJAX:

$(document).ready(function() {
    $('#filterButton').click(function(e) {
        e.preventDefault();
        // When the filter button is clicked, grab the ingredient ID and the cuisine ID
        var mainIngred = $('#sel1').val();
        var cuisine = $('#cuisine').val();
        var userID = $('#userIDHidden').val();

        var data = {
            "ingredID"  :   mainIngred,
            "tagID"     :   cuisine,
            "userID"    :   userID
        }

        var filterajaxurl = '/recipe-project/filter-ajax.php';

        $.ajax({
            url: filterajaxurl,
            type: "POST",
            data: data,
            success:function(data) {
                $("#cookbook-recipe").html(data);
            }
        });
    });
});

This is the PHP script I call, when it's called I want to replace the default data in the div with the ID cookbook-recipe with the HTML below after the PHP has looped through and got each recipe.

include_once('classes/class-database-functions.php');
$db_functions = new Database_Functions();    
$ajax_recipes = $db_functions->ajax_filter_search(23,6);    
$recipes_array = array();    
foreach ($ajax_recipes as $ajax_recipe) {
    $search_recipes = $db_functions->get_single_recipe($ajax_recipe);
    $rows = mysqli_fetch_array($search_recipes, MYSQL_ASSOC);
    array_push($recipes_array,$rows);
} ?>


    <?php
       if (isset($recipes_array) ) {
           foreach ( $recipes_array as $single_recipe ) { ?>
               <div class="col-md-4 portfolio-item">
                   <a href="single-recipe.php?id=<?php echo $single_recipe['recipe_id'];?>">
                       <?php if ( $single_recipe['recipe_image'] == '' ) { ?>
                           <img class="img-responsive" src="http://placehold.it/300x200" alt="">
                       <?php } else { ?>
                           <img class="img-responsive" src="<?php echo $single_recipe['recipe_image']; ?>" alt="">
                       <?php } ?>
                   </a>
                   <h4>
                       <a href="#">
                           <?php echo $single_recipe['recipe_name']; ?>
                       </a>
                   </h4>
               </div>
           <?php } } else { ?>
           <div class="col-md-4 portfolio-item">
               <h4>Please Add Some Recipes</h4>
           </div>
      <?php } ?>

Below is my default HTML

<button id="filterButton" class="btn btn-lg active" role="button">Filter Recipes</button>
<div id="cookbook-recipes" class="col-md-9">
           <?php
           if (isset($recipes_array) ) {
           foreach ( $recipes_array as $single_recipe ) { ?>
            <div class="col-md-4 portfolio-item">
                <a href="single-recipe.php?id=<?php echo $single_recipe['recipe_id'];?>">
                  <?php if ( $single_recipe['recipe_image'] == '' ) { ?>
                      <img class="img-responsive" src="http://placehold.it/300x200" alt="">
                  <?php } else { ?>
                    <img class="img-responsive" src="<?php echo $single_recipe['recipe_image']; ?>" alt="">
                   <?php } ?>
                </a>
                <h4>
           <a href="#">
             <?php echo $single_recipe['recipe_name']; ?>
           </a>
         </h4>
            </div>
          <?php } } else { ?>
          <div class="col-md-4 portfolio-item">
              <h4>Please Add Some Recipes</h4>
          </div>
          <?php } ?>
        </div>

However the HTML doesn't get replaced when I click the button and I get no console errors, can anyone see why?