JSFiddle - React, Tailwind, and code Playground

by khairulhasanmd

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row" id="dyn_template_telefon">
    <div class="col-md-3">
      <div class="form-group '.$error['telefon']['class'].'">
        <label class="control-label">'.$lang['mod1'][70].'</label>
        <input id="telefon" name="telefon[]" class="form-control" placeholder="" type="text" value="'.$_POST['telefon'].'">
      </div>          
    </div>
    <div class="col-md-2">
      <div class="form-group">
        <label class="control-label">'.$lang['mod1'][85].'</label>
        <select id="kategorie" class="form-control " name="kategorie[]" >
          <option value="">'.$lang['mod1'][87].'</option>'.$options['categories'][2].'</select>
      </div>
    </div>
    <div class="col-md-1">
      <div class="form-group">
        <label class="control-label">&nbsp;</label>
        <span class="input-group-btn">
         <button class="btn btn-success btn-add" id="dyn_btn_telefon" type="button">
          <span class="glyphicon glyphicon-plus"></span>
         </button>
        </span>
        <span class="input-group-btn">
         <button class="btn btn-danger btn-delete" id="dyn_btn_telefon_d" type="button">
          <span class="glyphicon glyphicon-minus"></span>
         </button>
        </span>
      </div>
    </div>
  </div>
  <div id="dyn_addarea_telefon"></div>

JavaScript

//Anfang DynamicFields
$(function () {
$(document).on('click', '.btn-add', function () {

//Fallback fuer Timestamp
var TS = Math.round(+new Date()/1000);

//var del_id = $(this).attr('id');
var templateID = $(this).attr('id').replace('dyn_btn_', 'dyn_template_');
var addareaID = $(this).attr('id').replace('dyn_btn_', 'dyn_addarea_');

$('<div/>', {
    'id' : templateID+'_'+TS,
  'class' : 'row',
  html: $('#'+templateID).clone().html()
}).hide().appendTo('#'+addareaID).slideDown('slow');
});


$(document).on('click', '.btn-delete', function () {
var num = $(this).parent().parent().parent().parent().attr('id').match(/\d+/);
$('#dyn_template_telefon_' + num).remove();
});


});
function GetHtml() {
  return $('.dynDiv').clone().html();
}
$('.btn-add').click();
//Ende DynamicFields