Skill filter - How to refactor this code to remove duplication

JavaScript
1

Hi,
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.

Code:

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

<head>
  <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;
    }

    #skillSelect{
      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 */
    }

  </style>
  <title>Document</title>
</head>

<body>
  <div id="container">
    <h2> Demo Table Of Candidates <h2>
    <table class="candidates" id="candidates_example">
      <thead>
        <tr>
          <th>Name</th>
          <th>Skills</th>
        </tr>
      </thead>
      <tr>
        <td>Cirpo</td>
        <td>JavaScript, Docker</td>
      </tr>
      <tr>
        <td>Louis</td>
        <td>Java, AEM</td>
      </tr>
      <tr>
        <td>Nermin</td>
        <td>.NET, Azure</td>
      </tr>
    </table>
    <p>
      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>
       </select>
    </p>
    <h2 id='title'><h2>
    <h3 id='job'></h3>
    <div id='renderedTable' ></div>
  </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) {
        table.deleteRow(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(', '));

      nameCell.appendChild(candidateName);
      skillCell.appendChild(candidateSkills);
    }

    function addCandidatesToTable(table, candidates) {
      candidates.forEach(candidate => insertCandidate(table, candidate.name, 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;
      removeRowsFromTable(newCandidatesTable);
      const newTbody = newCandidatesTable.getElementsByTagName('tbody')[0];

      const filteredCandidates = filterCandidateBySkill(newCandidates, skill)

      addCandidatesToTable(newTbody, filteredCandidates)

      document.getElementById('renderedTable').appendChild(newCandidatesTable);
    }


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

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

    const filteredCandidates = filterCandidateBySkill(newCandidates, skill = 'JavaScript')
    //console.log(filteredCandidates);

    addCandidatesToTable(newTbody, filteredCandidates)

    document.getElementById('renderedTable').appendChild(newCandidatesTable);



  </script>
</body>

</html>