jquery - Button function only works on first click -

i trying button work throughout multiple clicks change displaying users on every click button working on first click.

i have hunch either has got ajax or fact each time button clicked button drawn.

i can verify getdata.php working fist click.

html button:

<button id="search">seach</button> 

jquery function button:

document.getelementbyid('search').addeventlistener('click', function (e) {     var info1= document.getelementbyid("datainput").value;     var div = document.getelementbyid("contentdisplay");      //removes current data displaying     while( div.haschildnodes() ){         div.removechild(div.lastchild);     }      var midhtml;     $.ajax({         async: false,         type: 'post',         url: 'getdata.php',         data: {key: "search", info: info1},         success: function(data) {             if(data.length > 10){                  div.innerhtml = html+data;             } else {                  div.innerhtml = "no data";             }         }     }); }); 

fast, ugly , not tested

document.getelementbyid('search').addeventlistener('click', clickforthebutton);  function clickforthebutton(){     var info1= document.getelementbyid("datainput").value;     var div = document.getelementbyid("contentdisplay");      //removes current data displaying     while( div.haschildnodes() ){         div.removechild(div.lastchild);     }      var midhtml;     $.ajax({         async: false,         type: 'post',         url: 'getdata.php',         data: {key: "search", info: info1},         success: function(data) {             if(data.length > 10){                  div.innerhtml = html+data;             } else {                  div.innerhtml = "no data";             }             document.getelementbyid('search').addeventlistener('click', clickforthebutton);         }     }); }