jquery createlement create more then one

See more:

jQuery

i have this in my aspx page

<div id="dialog">
		<div id="textresultfree"></div>
        <div id="myDivResult"></div>
</div>
<button id="creatItem" onclick="createItem();return false;">Boka tid</button>

Here is my function,

$(function () {
     var para = document.createElement("p");
     var element = document.getElementById("textresultfree");
     element.appendChild(para);
     var node = document.createTextNode("Lediga tider att boka");
     para.appendChild(node);



     var myDiv = document.getElementById("myDivResult");
     var selectList = document.createElement("select");
     myDiv.appendChild(selectList);

     $("#dialog").dialog({
         autoOpen: false

     });
     $("#creatItem").on("click", function() {
         $("#dialog").dialog("open");



         var free = "";
         for (var j = 0; j < bookedFreeTimes.length; j++) {

             free = bookedFreeTimes[j];
             var array = new Array(free);

             for (var k = 0; k < array.length; k++) {

                 var option = document.createElement("option");
                 option.text = array[k];
                 selectList.appendChild(option);

             }
         }

     }

     );
 });

Everytime i click on my button its creates more then 1 node why? and it wont work first time i click on the button only second time?


UPDATE
===
I want to create onclick inside here.

<button onclick="createItem();return false;">Boka tid</button>




       <div id="dialog">
       <div id="textresultfree"></div>
       <div id="myDivResult"></div>

   </div>

Like i have here onclick="createItem();return false;"

This function also calls onclick, but i have already created onclick in my aspx page,

So how should this code now that i am talking to onclick from my aspx page.

 var para = document.createElement("p");
    para.id = "para";
    var node = document.createTextNode("Lediga tider att boka");
    para.appendChild(node);
    var element = document.getElementById("textresultfree");
    element.appendChild(para);

    var myDiv = document.getElementById("myDivResult");
    var selectList = document.createElement("select");
    myDiv.appendChild(selectList);
  
   

    $(function () {$("#dialog").dialog({
            autoOpen: false

    });


        $("#creatItem").on("click", function() {
            $("#dialog").dialog("open");

            

            var free = "";
            for (var j = 0; j < bookedFreeTimes.length; j++) {

                free = bookedFreeTimes[j];
                var array = new Array(free);

                for (var k = 0; k < array.length; k++) {
                    
                    var option = document.createElement("option");
                    option.text = array[k];
                    selectList.appendChild(option);

                }
            }
                return false;
            }

        );
    });


}

On this line

$("#creatItem").on("click", function() {

Because that is the same as

onclick="createItem();return false;"

So how to i say i want to work with this

onclick="createItem();return false;"

Inside my function