Javascript append and undo problems
<p>I am having a few problems with javascript. I am trying to create a function for when I click a radio button it will run that function. (I got this to work).</p>

<p>My problem is when I click the radio button to order alphabetically it orders but then when i clicked the other radio buttons to change function it is still ordered alphabetically due to "APPEND" my question is how can I get my program to work so when I kill alphabetically ordered it only orders for that and when i click back to something else its ordered how it was originally.</p>

<p>Here is part of my code:</p>

<p>Javascript:</p>

<pre><code>function radiobuttonclicked() {

    var allChampions1 = $(".masterychampsforsum &gt; .colzz");
    var selectedcheckyesnochest = document.getElementsByName("optioncheckradiomasterychamps");

    if (selectedcheckyesnochest[0].checked == true) {
        allChampions1.show();
    }
    else if (selectedcheckyesnochest[1].checked == true) {
        var selectedChampions1 = $(".masterychampsforsum &gt; .colzz[data-chest-champion^='yes']");
        allChampions1.hide();
        selectedChampions1.show();
    }
    else if (selectedcheckyesnochest[2].checked == true) {
        var selectedChampions1 = $(".masterychampsforsum &gt; .colzz[data-ranked-champion^='yes']");
        allChampions1.hide();
        selectedChampions1.show();
    } else if (selectedcheckyesnochest[3].checked == true) {
        var alphabeticallyOrderedDivs = $('.colzz').sort(function(a, b) {
            return String.prototype.localeCompare.call($(a).data('championalphabeta').toLowerCase(), $(b).data('championalphabeta').toLowerCase());
        });
        var container = $("#masterychampsforum");
        container.detach().empty().append(alphabeticallyOrderedDivs);
        $('.summonerLayout-summary').append(container);
    }
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="tabItem Content SummonerLayoutContent summonerLayout-summary" data-tab-spinner-height="800" data-tab-is-loaded-already="true"&gt;
&lt;div class="SearchChampion" style="margin-top:20px;padding: 10px;border: 1px solid #000;background-color: #111111;"&gt;
    &lt;form class="SearchChampionForm" onsubmit="return false;" style="position: relative;"&gt;

        &lt;input name="optioncheckradiomasterychamps" style="margin-left:15px;vertical-align: middle;margin-top: -1px;" type="radio" value="Chest" id="option_all" onclick="radiobuttonclicked();" checked/&gt; &lt;label for="option_all" style="font-size:16px;"&gt;ALL&lt;/label&gt;
        &lt;input name="optioncheckradiomasterychamps" style="margin-left:15px;vertical-align: middle;margin-top: -1px;" type="radio" value="Chest" id="option_chest" onclick="radiobuttonclicked();"/&gt; &lt;label for="option_chest" style="font-size:16px;"&gt;CHEST&lt;/label&gt;
        &lt;input name="optioncheckradiomasterychamps" style="margin-left:15px;vertical-align: middle;margin-top: -1px;" type="radio" value="Ranked" id="option_ranked" onclick="radiobuttonclicked();"/&gt; &lt;label for="option_ranked" style="font-size:16px;"&gt;RANKED&lt;/label&gt;
        &lt;input name="optioncheckradiomasterychamps" style="margin-left:15px;vertical-align: middle;margin-top: -1px;" type="radio" value="Ranked" id="option_alpha" onclick="radiobuttonclicked();"/&gt; &lt;label for="option_alpha" style="font-size:16px;"&gt;ALPHABETICAL&lt;/label&gt;
    &lt;/form&gt;
&lt;/div&gt;

&lt;div class="masterychampsforsum" id="masterychampsforum"&gt;
&lt;div class="colzz" data-champion-name="'.$getLeagueKeyNamelistsidez.'" data-champion-key="'.$getLeagueKeyNamelistsidez.'" data-chest-champion="'.$champchestyes.'" data-ranked-champion="'.$checkchampionidyesnotrue.'" data-championalphabeta="'.$getLeagueKeyNamelistsidez.'"&gt;


&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The data in the data-championalphabeta is Names.</p>

<p><a href="http://aaronpap.ultimatefreehost.in/novo/profile.php?userName=forsakenhound" rel="nofollow noreferrer">Link to what i got currently</a></p>