JSFiddle - React, Tailwind, and code Playground
by Susan Adhikary
HTML
<a href="#" class="add_to_shortlist" cadidate_email="[email protected]" candidate_phone="+977984305460" candidate_name="check name" candid="check id" candidate_cv="database/check/location" >Add to shortlist</a>
<table class="table table-condensed">
<thead>
<tr>
<th>Candidate Id</th>
<th>Candidate Name</th>
<th>Candidate Email</th>
<th>Candidate Phone</th>
<th>Candidate CV</th>
<th>Edit</th>
</tr>
</thead>
<tbody id="cand">
</tbody>
JavaScript
$(document).ready(function(){
$('.add_to_shortlist').click(function(){
var candidate_id = $(this).attr('candid');
var candidate_name = $(this).attr("candidate_name");
var cadidate_email = $(this).attr("cadidate_email");
var candidate_phone = $(this).attr("candidate_phone");
var candidate_cv = $(this).attr("candidate_cv");
var newRowContent = "<tr><td>" + candidate_id +" </td><td>" + candidate_name + "</td><td>" + cadidate_email + "</td><td>" + candidate_phone + "</td><td><a target='_blank' href="+ candidate_cv +">View</a></td><td><a href='#' class='delete_shortlisted_row' id='remove_button'>remove</a></td></tr>";
$("#cand").append(newRowContent);
});
$("#cand").on('click', '#remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parents("tr").remove(); //Remove field html
x--; //Decrement field counter
});
});