Appending bootstrap modal with unique ID into table cell

I am working on a WordPress plugin at the moment and i am currently dealing with some kind of bug.

So this is problem i have expandable div's representing each day, you can add and remove them dynamically, screenshot

When you enter values in these two slots (time/location) and click create table button, time x location table is generated, screenshot.

So when user click on +Add event, modal should be shown. And this work perfectly for first day, when i add other days modals inside their td elements also have unique id's but they are not showing on +Add event click, when i inspect DOM i find they are printed more then one time(8 times to be more precise no matter how big table is)but they are not visible. Interesting fact is that when i click update(Wordpress button that save changes and refresh page) the modals start working on other days too.

Here is the code that prints the table :

   // unique id counter
    var uniID = 0;
       // if slots not empty
        if(numTS !== "" || numLS !== "") {
        var target = jQuery("div").find("[data-iterator='" + curr + "']"); 
        var content = '<table style="margin-top: 25px" class="table table-bordered"><tbody class="tbd' + curr + '"><tr class="tabelica' + curr + '">';
          content += '<td><span class="locc">Location</span> <span class="tslott">Timeslots</span></td>';
           // generate x part of table
           for (var i = 0; i < numTS; i++) {
               content += '<td class="tslot-fields">';
               content += '<div class="col-xs-12 tslot-name-div"><input class="tslot-name" type="text" placeholder="Name"> Pause <input type="checkbox"></div>';
               content += '<div class="col-xs-6 tslot-fields-div">Starts<br/><select><option>00:00</option><option>00:15</option></select></div>';
               content += '<div style="margin-top: 15px;" class="col-xs-6">Ends<br/><select><option>00:00</option><option>00:15</option></select></div>';
               content += '</td>';
           }
           content += '</tr>';
            // generate y part of table
            for(var j = 0; j < numLS; j++) {

                content += '<tr><td class="loc-fields"><input class="loc-input" type="text" placeholder="Loaction Name"> </td>';
                for(var k = 0; k < numTS; k++) {
                    var id = ++uniID;
                    content += '<td><button type="button" class="btn btn-custom" data-toggle="modal" data-target="#myModal' + id + '"> +Add event</button><div class="modal fade" id="myModal' + id + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div><div class="modal-body"> ... </div><div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div></div></div></div></td>';
                }
                content += '</tr>';
            }
          content += '</tbody></table>';
          target.append(content);
 }            

Really hope you guys can help me I am desperate about this.

via Chebli Mohamed