How to add columns at a specific position dynamically?

Question

I want to add columns at specific position by clicking on the cell then on a button to add. the problem is that when I click on the button for the fist time the result is correct and I have my column added at the position I selected. But when I try to add another one at another position, after clicking on the add button I have two new columns but I want juste one .... when I click for the third time I get three ... and it goes like this ... n click ... n columns and I cant figure out why and how to do to fix this ... please help !! Here is the code :

$(document).ready(function ()
{
//my function to create my table
$("#btn-create-table").click(function create_new_table(){

  var nb_columns = document.getElementById("columns").value;
  var nb_rows = document.getElementById("rows").value;

  var table=document.createElement("table");
  $(table).attr("element", "table");
  $(table).append(thead=document.createElement("thead"));

  $(thead).append(line=document.createElement("tr"));

    for (var j=0; j<nb_columns;j++) {
      $(line).append(document.createElement("th"));
    };

  $(table).append(tbody=document.createElement("tbody"));

  for(var j=0;j<nb_rows;j++){

     $(tbody).append(line=document.createElement("tr"))

        for (var k=0; k<nb_columns;k++) {
          $(line).append(td=document.createElement("td"));
    };
  };   
  
  var span=document.createElement("span");
  $(span).append(input=document.createElement("input"));
  $(input).attr("type","button");
  $(input).attr("name","addcolumn[]");
  $(input).attr("value","+");     
  $(input).addClass("addColumn");

 $("#content").append(table);
 $("#content").append(span);
});

//Add column in specific position
  
$(document).on('click','[element="table"] td', function add_column (){

  num_column = $(this).index();

  $("span .addColumn").click(function () { 
    
    $('[element="table"]').find('tr').each(function(){ 
      
      $(this).find('th').eq(num_column).after('<th>newTH</th>');
      $(this).find('td').eq(num_column).after('<td>newTD</td>'); 
      
    });
    
  });
  
});


});

table {

    border-collapse: collapse;
    width: 100%;
    height: 60px;
}

table td {
    border-width: 1px;
    border-style: solid;
    border-color: grey;
    height: 60px;
    text-align: center;
}

table thead {
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 255, 0.2);
}

table th {
    border-width: 1px;
    border-style: solid;
    border-color: grey;
    height: 60px;
    text-align: center;
}

input.addColumn {
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color:#99ffff;
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
    box-shadow: 0 0 4px rgba(0, 0, 0, .75);
    width:25px;
}
input.addColumn:hover {
    background-color:#00ffff;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div> 
  <label for="columns">
      <input id="columns" type="number" min="1" placeholder="columns"></input>
  </label>
  <br />
  <label for="rows" class="">
      <input id="rows" type="number" min="1" placeholder="rows"></input>
  </label>
  <br />
  <button id="btn-create-table">create</button>
  
<div id="content" contentEditable="true">
  
</div>

Answer 1

try to edit your code like this:

$("span .addColumn").unbind().click(function () { 

I added 'unbind()' method call before click

Answer 2

When you click on [element="table"] td, you add 'click' event listener. When you click next time, you add another event listener with the same code. So, you add too much listeners.

$(document).on('click','[element="table"] td', function add_column (){

  num_column = $(this).index();

  $("span .addColumn").click(function () { 

   $('[element="table"]').find('tr').each(function(){ 

     $(this).find('th').eq(num_column).after('<th>newTH</th>');
     $(this).find('td').eq(num_column).after('<td>newTD</td>'); 

   });

 });

});