Skill filter - How to refactor this code to remove duplication

My code works but has duplicate lines of code to replace the table data. Can anyone suggest how to refactor in vanilla JS ? I want Javascript candidates to show initially.


<!DOCTYPE html>
<html lang="en">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style type="text/css">

    h2,h3 {
    color: #6678b1;

    .candidates {
      font-size: 12px;
      font-weight: bold;
      background: #fff;
      margin: 45px;
      width: 480px;
      border-collapse: collapse;
      text-align: left;

    .candidates th {
      font-size: 16px;
      font-weight: normal;
      color: #039;
      padding: 10px 8px;
      border-bottom: 2px solid #6678b1;

    .candidates td {
      color: #669;
      padding: 9px 8px 0px 8px;

    .candidates tbody tr:hover td {
      color: #009;

      font-size: 12px;
      font-weight: bold;
      width: 200px;
      background-color: #6678b1;
      transform: translateY(-4px);
      -ms-transform: translateY(-4px); /* IE 9 */
      -webkit-transform: translateY(-4px); /* Safari */


  <div id="container">
    <h2> Demo Table Of Candidates <h2>
    <table class="candidates" id="candidates_example">
        <td>JavaScript, Docker</td>
        <td>Java, AEM</td>
        <td>.NET, Azure</td>
      Please filter Canditates by skill:
      <select id="skillSelect" onchange="changeSkill()">
       <option value="AWS">AWS</option>
       <option value="Azure">Azure</option>
       <option value="Docker">Docker</option>
       <option value="JavaScript" selected >JavaScript</option>
       <option value=".Net">.Net</option>
       <option value="PHP">PHP</option>
       <option value="Python">Python</option>
    <h2 id='title'><h2>
    <h3 id='job'></h3>
    <div id='renderedTable' ></div>

  <script type="text/javascript">
    const newCandidates = [
      { name: "Kerrie", skills: ["JavaScript", "Docker", "Ruby"] },
      { name: "Mario", skills: ["Python", "AWS"] },
      { name: "Jacquline", skills: ["JavaScript", "Azure"] },
      { name: "Kathy", skills: ["JavaScript", "Java"] },
      { name: "Anna", skills: ["JavaScript", "AWS"] },
      { name: "Matt", skills: ["PHP", "AWS"] },
      { name: "Matt", skills: ["PHP", ".Net", "Docker"] },

    function removeRowsFromTable(table) {
      const rows = table.getElementsByTagName("tr");

      while (rows.length > 1) {

    function insertCandidate(tbody, name, skills) {
      const newRow = tbody.insertRow();
      const nameCell = newRow.insertCell();
      const skillCell = newRow.insertCell();

      const candidateName = document.createTextNode(name);
      const candidateSkills = document.createTextNode(skills.join(', '));


    function addCandidatesToTable(table, candidates) {
      candidates.forEach(candidate => insertCandidate(table,, candidate.skills));

    function filterCandidateBySkill(candidates, skill) {
      // INSERT YOUR LOGIC HERE   <-------------------------
      let filteredCandidates = candidates.filter(candidate => candidate.skills.includes(skill));

      return filteredCandidates;

    function changeSkill() {
      let skill = document.getElementById("skillSelect").value;
      const newTbody = newCandidatesTable.getElementsByTagName('tbody')[0];

      const filteredCandidates = filterCandidateBySkill(newCandidates, skill)

      addCandidatesToTable(newTbody, filteredCandidates)


    const candidatesTable = document.getElementById("candidates_example");
    const newCandidatesTable = candidatesTable.cloneNode(true);

    const newTbody = newCandidatesTable.getElementsByTagName('tbody')[0];

    const filteredCandidates = filterCandidateBySkill(newCandidates, skill = 'JavaScript')

    addCandidatesToTable(newTbody, filteredCandidates)