javascript - On click function appears to be active after element removal -

i'm making program finds shortest path in graph, program created on click appending divs container. main program appears work intended, problem arises when remove program , start again. functions appear execute 2 times.

you can see problem on http://runaider.github.io/ click "path finder" create vertexes, click "path finder" again , try create vertexes again you'll see problem.

i tried using .remove(), .unbind(), .cleandata() nothing helps.

this 1 of functions spoke of

$(document).on ("click", "#b1", function () {     count++;     alert(count);     $('.mainfield').append(         $('<div class="vertex">').attr("id","v"+count).text("v"+count)     );     jsplumb.draggable('v'+count, {containment:"parent"}) }); 

this how remove the objects:

function dispandgraphfield(){ jsplumb.detacheveryconnection(); $('.mainfield').animate({opacity:0},1000,function(){}); $('.options').animate({opacity:0},1000,function(){     $('.graph').animate({width:1,height:1,borderradius:180},700,function(){         $('#b1').unbind();         $('.optionssec1').empty();         $('.optionssec2').empty();         $('.options').empty();         $('.graph').remove();     }); }); 

if need see code here https://github.com/runaider/runaider.github.io (script.js , graphscript.js)

i have made stupid mistakes , appreciate in finding , solving them.