jquery ajax method being repeated even though click event not correct

Question

Hi There, I have some ajax on my web page, that is triggered via a click event, the javascript in question looks like this,

$('.career_select .selectitems').click(function(){
        var selectedCareer = $(this).attr('id');
        $.ajax({
            type: 'POST',
            url: '/roadmap/step_two',
            data: 'career_choice='+selectedCareer+"&ajax=true&submit_career=Next",
            success: function(html){
                $('.hfeed').append(html);
                buildSelects();
                $('.grade_options .selectitems').addClass('select_1')
              }
        });
    });

This part of the ajax request works fine. What happens on success is that I load in another view into my page, this view has some more user interaction that fires some more ajax however, it just fires the previously used method, where as it should be doing the following,

    $('.grade_options .selectitems').click(function(){
    var selectedGrade = $(this).attr('id');
    alert(selectedGrade);
})

The HTML+PHP looks like this,

<div class="grade_options">
        <input value="" name="grade" class="customselect" type="hidden">
        <div class="iconselect">Have you got any of the following?</div>
        <div style="display: none;" class="iconselectholder"> 
        <div class="selectoptions"> 
            <div id="1" class="selectitems hoverclass selectedclass select_1">
                <span>Accountant</span>
            </div>
            <div id="2" class="selectitems">
                <span> Grade D's at GCSE including English and Maths</span>
            </div>
            <div id="3" class="selectitems">
                <span>3 GCSE's at grade B and 3 GCSEs at grade C or equivalent and you must have achieved at least a grade C in GCSE English Language &amp; B in Maths</span>
            </div>
        </div>
</div>
                <noscript>
                    <input type="submit" value="Next" name="submit_grades" class="arr" />
                </noscript>
</div>

The .selectitems get created from a select menu using this plugin,

    $.fn.customSelect = function() {
  // define defaults and override with options, if available
  // by extending the default settings, we don't modify the argument
 return this.each(function() {  
 obj = $(this);  
obj.after("<div class=\"selectoptions\"> </div>");
obj.find('option').each(function(i){ 
  $(".selectoptions").append("<div id=\"" + $(this).attr("value") + "\" class=\"selectitems\"><span>" + $(this).html() + "</span></div>");
});
obj.before("<input type=\"hidden\" value =\"\" name=\"" + this.name + "\" class=\"customselect\"/><div class=\"iconselect\">" + this.title + "</div><div class=\"iconselectholder\"> </div>")
.remove();
$('.iconselectholder').hide();
$(".iconselect").click(function(){
$(".iconselectholder").toggle("slow");});
    $(".iconselectholder").append( $(".selectoptions")[0] );
$(".selectitems").mouseover(function(){
    $(this).addClass("hoverclass");
});
    $(".selectitems").mouseout(function(){
    $(this).removeClass("hoverclass");
    });
    $(".selectitems").click(function(){
    $(".selectedclass").removeClass("selectedclass");
    $(this).addClass("selectedclass");
    var thisselection = $(this).html();
$(".customselect").val(this.id);
    $(".iconselect").html(thisselection);
    $(".iconselectholder").toggle("slow")
    });
    });  
  // do the rest of the plugin, using url and settings
}

I am struggling to see any reason as to why my second ajax request is running the method of the first ajax request.