javascript - JQueryを使用して2つの別々の部分を強調表示する

Question

マウスの動きを使用して画像上の 2 つのスポットを強調表示し、クリックして確認しようとしています。最初に 1 つ目を強調表示し、次にもう 1 つを強調表示します。私が抱えている問題は、最初のハイライトが割り当てられると、2 番目のハイライトにマウスを移動するとすぐに、最初のハイライトがマウス ポインターと共にドラッグされることです。2 番目のハイライトを表示した後、最初のハイライトを元の場所に保持するにはどうすればよいですか?

$(document).ready(function(){
    highlightiris('circle');
    setInterval(function(){
        if ($('#t_circle').val()=='') {
            $('#t_circle').val('in progess');
            highlightiris('circle');
        }
        if ($('#t_circle').val()=='done' && $('#t_circle1').val()=='') {
            $('#t_circle1').val('in progess');
            highlightiris('circle1');
        }
    },200);
});

function highlightiris(vara) {
    $('#'+vara).show();
    c_height = $('#'+vara).height();
    c_width = $('#'+vara).width();
    $(document).mousemove(function(e) {
        $('#'+vara).css({top: e.pageY-(c_height/2), left: e.pageX-(c_width/2), position:'absolute'});
        $('#top_'+vara).val(e.pageY-(c_height/2));
        $('#left_'+vara).val(e.pageX-(c_width/2));
    });
    $(document).bind('mousewheel', function(event, delta, deltaX, deltaY) {
        if (delta==1) {
            c_width+=2;
            c_height+=2;
            $('#'+vara).width(c_width).height(c_height);
        } else if (delta==-1) {
            c_width-=2;
            c_height-=2;
            $('#'+vara).width(c_width).height(c_height);
        }
        $('#dia_'+vara).val(c_width);
    });
    $(document).click(function(){
        $('#t_'+vara).val('done');
    });
    if ($('#t_'+vara).val()=='done') {
        return;
    }
}