javascript - AJAX chat, setInterval stacks id's -

i'm doing chat @ school using ajax. if click on link (the person want chat with), there's onclick='load(id)' persons id inside. , works fine 1 person, when click on person it's id's stack up. figured out interval not cleared, after hours of searching still can't find helps me! hope guys can me. i'm newbie ajax..

frontend:

<li><a onclick='load( id )'> username </a></li> 

ajax:

function load(id) {             /*remove old interval?*/             var interval = setinterval(function() {                 console.log(id);                 //update chatbox                 $(".content-box").load("config.php", {                     "id" : id                 }, function() {                     //loading config.php                 });             }, 1000);         } 

btw according teacher need 'handler' and/or need write more oop. wrote, new me.

<script type="text/javascript">  function load(id) {              /*remove old interval?*/              var interval = setinterval(function()               {                  $.ajax({                  url: 'config.php',                  type: 'post',                  data: {"id":id },                  datatype:"json",                  success: function(result)                   {                  	var hasclass = $(".content-box").hasclass("chat_"+id);                  	if(hasclass == false)                  	{                  		var create_div = "<div class='chat_"+id+"'></div>";                  		$(".content-box").append(create_div);                  	}                  	$(".chat_"+id).html(result);                  	                   }              });                }, 1000);          }    </script>

<div class="content-box"></div>    <ul>  <li><a onclick='load(1)'> ashish </a></li>  <li><a onclick='load(7)'> akash </a></li>  </ul>  here pass id in function load().