switching two ids with ajax callback
<p>I was kindly helped by Jonathan over here <a href="http://stackoverflow.com/questions/2166912/simple-javascript-question-linking-button-state-to-image-swap">http://stackoverflow.com/questions/2166912/simple-javascript-question-linking-button-state-to-image-swap</a></p>

<p>The problem is that this makes the "active" class the same class for both list items.</p>

<p>Each list item needs to toggle its own active and its own inactive class (each is a button with its own css styling and background image).</p>

<p>Can you please help me modify the script so that I can do that?</p>

<p>Here is Jonathans provided code:</p>

<pre><code>&lt;li class="transcript"&gt;
   &lt;a id="transcriptionhorbutton" class="inactive"
      href="javascript:void()" 
      onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li class="transcript"&gt;
   &lt;a id="transcriptionvertbutton" class="inactive"
      href="javascript:void()" 
      onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this);"&gt;&lt;/a&gt;
&lt;/li&gt;

&lt;script&gt;

var buttons = [ document.getElementById("transcriptionvertbutton"), 
                document.getElementById("transcriptionhorbutton")];

function make_active(el) {
  deactivate_buttons();
  el.setAttribute("class","active");
}

function deactivate_buttons() {
  buttons[0].setAttribute("class","inactive");
  buttons[1].setAttribute("class","inactive");
}
&lt;/script&gt;
</code></pre>

<p>I understand that the problem is here:</p>

<pre><code>function make_active(el) {
  deactivate_buttons();
  el.setAttribute("class","active");
}
</code></pre>

<p>but I don't know enough to separate that into two different classes.</p>
