javascript - Issues with find() when inserting html dynamically using jquery -

i have modal grid of buttons representing different html components. when 1 of buttons pressed, html supposed injected page once modal closes. however, i'm having trouble targeting specific column html injected. here's code:

<div class="row" id="newrow">     <div class="col-md-12 column">         <button class="btn addelement" href="#" data-toggle="modal" data-target="#add-element"><i class="fa fa-plus fa-3x add-item"></i></button>     </div> </div> 

and in js file have code assign id column div (since there potentially many columns addelement button) looks this:

...  $(this).parent().next().children().find('.column').assignid();  ... 

up point, works well. i'm having no trouble getting column unique id (defined in assignid() function).

as mentioned, addelement button gets clicked, opening modal when code executed:

$(document).on('click', 'button.addelement', function (e) {     e.preventdefault();      $('#add-element').modal('show').draggable();      var col = $('button.addelement').parent();      // debugging in browser verifies colid     // stores id attribute column     var colid = col.attr('id');      addelements(colid); });  ...  function addelements(colid) {     $('#insert-paragraph').on('click', function () {         var html_content = '<div class="box" data-type="paragraph">...</div>';         $("#newrow").find("#"+colid).html(html_content)          $('#add-element').modal('hide');     });    } 

it's on line: $("#newrow").find(colid).html(html_content); i'm having issue. guess formatting find(...) wrong , can't insert variable that, i've tried few different things , nothing seems working.

any appreciated.

thanks!

update:

@juvian suggested writing few of variables' values console:

console.log(colid); console.log($("#newrow")).length; console.log($("#newrow").find("#"+colid).length); console.log($("#newrow").find("#"+colid).html());  

i logged these values twice. first, before passing colid addelements function , in addelements function after $(#newrow").find("#"+colid).html(html_content); results of 2 tests follows:

values prior running addelements:

console.log(colid);                               = 8153-1076-641d-3840 console.log($("#newrow")).length;                 = object[div#newrow.row.clearfix] console.log($("#newrow").find("#"+colid).length); = 1 console.log($("#newrow").find("#"+colid).html()); = <button class="btn addelement"...>...</button> 

values after insert-paragraph button pressed:

console.log(colid);                               = 8153-1076-641d-3840 console.log($("#newrow")).length;                 = object[div#newrow.row.clearfix] console.log($("#newrow").find("#"+colid).length); = 1 console.log($("#newrow").find("#"+colid).html()); = <div class="box box-element" data-type="paragraph">...</div> 

interestingly enough, appears working i'd expect to, however, when it's said , done, addelement button remains , page still renders this:

<div id="newrow" class="row clearfix">     <div id="32aa-ab91-f50d-c3b3" class="col-md-12 column ui-sortable">         <button class="btn addelement" data-target="#add-element" data-toggle="modal" href="#">             <i class="fa fa-plus fa-3x add-item"></i>         </button>      </div> </div> 

.find jquery functions, takes css selector parametre. unfortunately, colid string, matches no elements (unless colid html, span or that)

you missing adding id selector @ beginning id match:

.find("#"+colid)