Append a word to ID attribute when it is hidden and remove it when toggle to show
<ol>
<li>I have two input fields that need to hide when first visit. </li>
<li>There will be a button to toggle it to show the fields so it could be edited.</li>
<li>The appending word (i.e. _temp) with the id is just to change the id name so that it doesn't save over again if it's not necessary. When the fields are showing the append word (_temp) needs to be removed.
(i.e. (<strong>Original Id Name</strong>: payment_gateway_login) (<strong>Append Id Name</strong>: payment_gateway_login_temp), when fields are showing remove append id name so it should be back to original: payment_gateway_login, the same should follow with id="payment_gateway_password".</li>
<li>Below is as far as I can get. Any help would be greatly appreciated.</li>
</ol>

<p>HTML:</p>

<pre><code>&lt;ul&gt;
  &lt;li class="show-hide-container hide" style="display: list-item; "&gt;
    &lt;ol&gt;
      &lt;li class="password input required stringish" id="payment_gateway_login_input"&gt;
        &lt;input id="payment_gateway_login" name="payment_gateway[login]" type="password"&gt;
     &lt;/li&gt;
     &lt;li class="password input required stringish" id="payment_gateway_password_input"&gt;
       &lt;input id="payment_gateway_password" name="payment_gateway[password]" type="password"&gt;
     &lt;/li&gt;
   &lt;/ol&gt;
 &lt;/li&gt;

 &lt;li class="clearfix edit-login-pass"&gt; &lt;a href="#" class="btn" id="show_hide"&gt;Edit Login &amp;amp; Password&lt;/a&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>​</p>

<p>JQUERY:</p>

<pre><code>$("input#payment_gateway_login").attr("id", "payment_gateway_login" + "_temp");
$("input#payment_gateway_password").attr("id", "payment_gateway_password" + "_temp");

$("#show_hide").live("click", function(event) {
  return $("li.show-hide-container").toggle("show");
});
</code></pre>

<p>​</p>
