javascript - Jquery Dynamic div multiple boxes and put into database -

i trying create dynamic div block fields in struggling right each div blocks fields not same id's when inserting database.

do not know how go this... please been struggling 2 days now.

also not know how delete block if not need anymore. how post dynamically database ?

<div id="boxwidget" class="box-widget">         <div class='form-group hideblockfield'><label><span class='error-title error-fields'></span>title</label><input type='text' class='form-control' id='title' name='title' placeholder='title'></div>          <div class="form-group hideblockfield">         <label><span class="error-description error-fields"><?php echo $description_error ?></span>description</label>         <textarea rows="3" type="text" class="form-control" id="description" name="description" placeholder="description"></textarea>       </div>      <div id="hideimageroup" class="hideimageroup form-group">         <label class="hideimagelabel"><span class="error-title error-fields"><?php echo $image_error ?></span>image</label><br>         <button type="button" class="btn btn-default" data-toggle="modal" data-target="#mymodal" name="submit">open gallery</button>         <input type="hidden" class="form-control" id="image" name="image">     </div>        <div id="hideiconroup" class="hideiconroup form-group">         <label><span class="error-title error-fields"><?php echo $icon_error ?></span> icon</label>         <input type="text" class="form-control" id="icon" name="icon" placeholder="icon">     </div>                        <div class="form-group hideblockfield">         <label><span class="error-title error-fields"><?php echo $buttontext_error ?></span>button text</label>         <input type="text" class="form-control" id="buttontext" name="buttontext" placeholder="button text">     </div>        <div class="form-group hideblockfield">         <label><span class="error-btnurl error-fields"><?php echo $buttonurl_error ?></span>button url</label>         <input type="text" class="form-control" id="buttontext" name="buttontext" placeholder="button url">     </div>   </div>  

add new box

function createnewblock(){      var $div = $('div[id^="boxwidget1"]:last');      // , increment number 1     var num = parseint( $div.prop("id").match(/\d+/g), 10 ) +1;      // clone , assign new id (i.e: num 4 id "klon4")     var $klon = $div.clone().prop('id', 'boxwidget1'+num );      $('#boxarea').append($klon);    } 

first off, first line in js undefined there's nothing id boxwidget1 on page

to remove element:

$('element query').remove() 

second, you're trying isn't clear

edit

the id of element doesn't have relevance server-side, it's name attribute gets mapped. also, name element applicable form elements wrapped in form tag, unless you're sending data via js. it's difficult clear idea of going on without more information

could perhaps create jsfiddle?