JSFiddle - React, Tailwind, and code Playground

HTML

<span class="source">
<span id="sprtdiv" class="tab1"><table width="90%" border="1"><tr><td><input type="text" class="yuzdeyetmis" name="partname[]" value="" id="pname" placeholder="Name" /><div id="tab1" class="yuzdeotuz"> DELETE </div></td></tr><tr><td><textarea rows="3"  name="partdetay[]" id="pdetay" placeholder="Detail"></textarea></td></tr></table> </span>
</span>

<input type="button" id="add_more_part" class="upload" value="Add New Record"/>

CSS

span table td {
    height: 82%;
    border: none;
}
span table {
    background-color: gray;
    margin-top: 5px;
    border: none;
    padding: 5px;
    width: 100%;
}
 input[type="text"]#pname {
    float: left;
    width: 65%;
}
.yuzdeotuz:hover {
    border: 2px solid black;
}
.yuzdeotuz {
    background: red none repeat scroll 0 0;
    border: 2px solid red;
    cursor: pointer;
    float: right;
    font-size: 16px;
    height: 20px;
    line-height: 20px;
    width: 28%;
}

JavaScript

$(".yuzdeotuz").click(function(){
var strtab = $(this).attr('id');
alert(strtab );
$("."+strtab).remove();

    });
    //  To add new bolum stream source field dynamically, on click of "Add More Source" button 
$('#add_more_part').click(function() {

var tabcount = $('.yuzdeotuz').length;
if (tabcount == 1 || tabcount != 1)
 {tabcount++; 
 mytab = "tab"+tabcount;}

$(".source").append('<span id="sprtdiv" class='+mytab+'><table width="90%" border="1"><tr><td><input type="text" class="yuzdeyetmis" name="partname[]" value="" id="pname" placeholder="Name" /><div id='+mytab+' class="yuzdeotuz"> DELETE </div></td></tr><tr><td><textarea rows="3"  name="partdetay[]" id="pdetay" placeholder="Detail"></textarea></td></tr></table> </span>');
});