jquery ajax call runs multiple times - php

Question

I'm having a problem when I click my generate cards button multiple times(it generates a new set of cards randomly on every click) and then I click on any of my buttons that sort it will run multiple ajax calls instead of just the latest generated array. It will pass in every array of cards that has been generated not just the most recent one, sort of like it's keeping a queue.
console log will output, "sending color sort", "sending color sort", "sending color sort", etc. *For as many times as i've clicked my generate_cards* button
How can I have it so the sort function only runs once.
<input type="button" value="Generate Cards" id="generate_cards"> </input>
<input type="button" class="sorter" value="Color Sort" id="color_sort"> </input>
<input type="button" class="sorter" value="Shape Sort" id="shape_sort"> </input>
Generate Cards:
$('#generate_cards').click(function() {
$.ajax({
url: ''+set,
async: false,
type: 'POST',
dataType: 'html',
success: function(data) {
var obj = JSON.parse(data);
//sent array to sorting function :
sorting(obj);
var tmpl = $("#formInfo_tmpl").html();
var html = Mustache.to_html(tmpl, obj);
pool_window.html(html);
initilizejs();
},
error:function(jqXHR, textStatus, errorThrown){
alert("Error type" + textStatus + "occured, with value " + errorThrown);
}
});
card sort function
function sorting(cards) {
$('.sorter').on("click", function() {
var cards_window = $("#sealed_pool");
var sort_type = $(this).attr('id');
//just give me the first word:
sort_type = sort_type.replace(/(\w+).*/,"$1");
console.log('sending'+sort_type);
$.ajax({
url: '',
async: false,
type: 'POST',
data: ({'cards':cards, 'sort_type':sort_type}),
dataType: 'html',
success: function(data) {
var obj = JSON.parse(data);
if(sort_type =='color_sort')
{
var tmpl = $("#color_sort_tmpl").html();
}
if(sort_type =='shape_sort')
{
var tmpl = $("#formInfo_tmpl").html();
}
var html = Mustache.to_html(tmpl, obj);
cards_window.html(html);
initilizejs();
},
error:function(jqXHR, textStatus, errorThrown){
alert("Error type" + textStatus + "occured, with value " + errorThrown);
}
});
});
}

Answer 1

remove the previous click-listener before you add a new:
$('.sorter')
.off("click")
.on("click", function() {
//code
});

Answer 2

You need to use setInterval within the document ready function, like this:
$(document).ready(function() {setInterval(doAjax, 5000);});