JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:;" data-lang="Spanish">To Spanish</a>
<a href="javascript:;" data-lang="Russian">To Russian</a>


<ul>
    <li><a class="clickButton" href="folder1/firstLink/Languages/English/folder/index.html">Index Link</a></li>
    <li><a class="clickButton" href="../folder2/secondLink/Languages/English/folder/index.html">A different Link </a></li>
    <li><a class="clickButton" href="../../folder3/Languages/English/folder/index.html">Another different link</a></li>
<ul>

JavaScript

var current = "English"
$("[data-lang]").on("click", function() {
    var lang = $(this).data("lang");
    $(".clickButton").prop("href", function(i, href) {
        return href.replace(current, lang);
    });
    current = lang;
});