JQuery Dynamic Add/Remove Table

JQuery Dynamic Add/Remove Table with input text fields

by zzzrefiddle

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
<form class="ui form">
<div class="field" id="check">
  <table class="ui unstackable table" id="dynamicTable1">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<input type="text" id="lnkss" placeholder="link">
    
<input class="positive ui button add" type="button" id="addrow" value="Add New Row" />

<input type="button" class="negative ui button removeall" value="Remove All" />
  
<table class="samplerow" style="display:none">
    <tr>
      <td><input type="text" id="fld1"/></td>
      <td><input type="text" id="fld2"/></td>
      <td><button class="circular ui icon button remove"><i class="icon remove"></i></button></td>
    </tr>
</table>
</form>

CSS

.ui.button.remove:hover{
  color:red;
}

.ui.button.add:hover{
  background:white;
  color:green;
}

.ui.button.removeall:hover{
  background:white;
  color:red;
}

JavaScript

$(document).ready(function() {
      var id = 0;
      
      //alert(link);
      $("#addrow").click(function() {
        id++;
        var row = $('.samplerow tr').clone(true);
        row.find("#fld1").val($('#lnkss').val());
        row.find("#fld2").val("g");
        row.attr('id',id); 
        row.appendTo('#dynamicTable1 tbody');        
        return false;
    	});        
        
			$('.remove').on("click", function() {
  			$(this).parents("tr").remove();
			});
      
      $('.removeall').on('click', function(){
        $("#dynamicTable1 tbody").html("");
      	//$("#dynamicTable1").append("<tbody></tbody>");
      });
});

//https://stackoverflow.com/questions/36095895/semantic-ui-main-menu-css-hover-and-focus