Cancel input and return last value

Hi, I have a table which when I press a button, I can modify the line with input. What I’m trying to do is implement another button which will cancel the input that have not been added yet to the document and return the value before I pressed the modify button. Here’s the code:
HTML:

 <tbody id="tableau" onload="identifRandom()">
    <tr id="ligne1">
        <td class="identifiantRandom"> </td>
        <td id="episodeTitre1">Pilot</td>
        <td id="episodeNombre1">1</td>
        <td id="episodeDirecteur1">Vince Gilligan</td>
        <td>
            <input type="button" id="modifierBtn1" value="Modifier" class="modifier" onclick="modifierLigne('1')">
            <input type="button" id="validerBtn1" value="Valider" class="valider" onclick="validerLigne('1')">
            <input type="button" id="supprimerBtn1"  value="Supprimer" class="supprimer" onclick="supprimerLigne('1')">
            <input type="button" id="annulerBtn1" value="Annuler" class="annuler" onclick="annulerLigne('1')">
        </td>
    </tr>

Javascript:


function modifierLigne(numeroLigne)
{
    document.getElementById('modifierBtn'+numeroLigne).style.display ='none';
    document.getElementById('validerBtn'+numeroLigne).style.display = 'block';
    document.getElementById('supprimerBtn'+numeroLigne).style.display = 'block';
    document.getElementById('annulerBtn'+numeroLigne).style.display = 'block';

    let episodeTitre = document.getElementById('episodeTitre'+numeroLigne);
    let episodeNombre = document.getElementById('episodeNombre'+numeroLigne);
    let episodeDirecteur = document.getElementById('episodeDirecteur'+numeroLigne);

    let episodeTitreModif = episodeTitre.innerHTML;
    let episodeNombreModif = episodeNombre.innerHTML;
    let episodeDirecteurModif = episodeDirecteur.innerHTML;

    episodeTitre.innerHTML = "<input type='text' id='modifTitre"+numeroLigne+"' value='"+episodeTitreModif+"'>";
    episodeNombre.innerHTML = "<input type='number' id='modifNombre"+numeroLigne+"' value='"+episodeNombreModif+"'>";
    episodeDirecteur.innerHTML = "<input type='text' id='modifDirecteur"+numeroLigne+"' value='"+episodeDirecteurModif+"'>";
}
function annulerLigne(numeroLigne)
{

    document.getElementById("modifTitre"+numeroLigne).style.display ='none';
    episodeNombreModif = document.getElementById("modifNombre"+numeroLigne).style.display ='none';
    episodeDirecteurModif = document.getElementById("modifDirecteur"+numeroLigne).style.display ='none';

    document.getElementById('modifierBtn'+numeroLigne).style.display ='block';
    document.getElementById('validerBtn'+numeroLigne).style.display = 'none';
    document.getElementById('supprimerBtn'+numeroLigne).style.display = 'none';
    document.getElementById('annulerBtn'+numeroLigne).style.display = 'none';
}

Currently, my cancel button erase the text in the line completely, which is not what I want, I want to return the value in the HTML.

Thanks you!