Returning text to default state (jQuery)

Question

I've attempted to collect text fields in my document and replace it with different text (language). Which went fine, but I'm not able to return it back without reloading a page.

Firstly, all text fields I wish to replace have property called lang="en".

So I've used jQuery .each() function to collect all of them into a array doing following:

$(document).ready(function() {
   $("[lang=en]").each(function(){
   var textArray = $(this).text();
   });
});

While variable textArray holds collection of required text fields to be replaced with another variable. Example:

var replaceText = textArray.replace("Hello", "Hi").replace("Good afternoon!", "Hi!");

While inside each function I can do $(this).text(replaceText) to apply replaced text, but I wish to do it with button click (button1) while another button (button2) will change it back.

Inside button onclick event (inside each loop function) $["lang=en"].text(replaceText); does not have correct effect.

Answer 1

<input type="button" id="convert" value="Convert"/>
<input type="button" id="convert-back" value="Convert Back"/>

---

#convert will convert your text in all input files which has lang=en property. #convert-back button will do the reverse. Let me know if it's working for you

---

$(document).ready(function () {

    $("#convert").click(function () {

        $("input:lang(en)").each(function () {

            var textArray = $(this).val();
            var replaceText = textArray.replace("Hello", "Hi").replace("Good afternoon!", "Hi!");
            $(this).val(replaceText)
        });
    });

    $("#convert-back").click(function () {

        $("input:lang(en)").each(function () {

            var textArray = $(this).val();
            var replaceText = textArray.replace("Hi", "Hello").replace("Hi!", "Good afternoon!");
            $(this).val(replaceText)
        });
    });

});

---

Edit

HTML Part

<input type="text" lang="en" value="Hello" alt="Hello, stack"/>
<input type="text" lang="en" value="Hello" alt="Hello, over"/>
<input type="text" lang="en" value="Hello" alt="Hello, flow"/>
<input type="text" lang="en" value="Hello" alt="Hello, stack"/>
<input type="text" lang="en" value="Hello" alt="Hello, over"/>

<input type="button" id="convert" value="Convert"/>

Jquery Part

$(document).ready(function () {

    $("#convert").click(function () {

        $("input:lang(en)").each(function () {

            var textArray = $(this).val();
            var newArray = $(this).attr("alt");

            $(this).val(newArray);
            $(this).attr("alt", textArray);
        });

        if ($(this).val() == "Convert") { $(this).val("Convert back"); } 

        else { $(this).val("Convert"); }
    });

});

Stored old value into alt tag of input box to replace again. Let me know if it's helpful to you.