title: add class to span element with onClick javascript
body: <p>I'm searching hours for an solution and found some answers, but not a quite fitting one.</p>
  
  <p>I have several <code>&lt;span id="same-id-for-all-spans"&gt;&lt;/span&gt;</code> elements with each of them including one <code>&lt;img&gt;</code> element.
  Now I want to create a print template, to only print those  elements which have a specific <strong>class</strong> added to it.</p>
  
  <p>The question is, how can I add a <strong>class</strong> to a span by clicking on it. 
  This way I want to "mark" several spans which then have an underlying print-css style to only print the ones with the specific*<em>class</em>*.
  <strong>Important:</strong> It should be possible to click (add class) and reclick (delete class) for single spans.</p>
  
  <p>Thank you so much.
  Best Regards
  Mazey</p>
  
  <hr>
  
  <p>its a wordpress return for all the spans, so same id. 
  at the moment I have this js included:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function changeid ()
  {
  var e = document.getElementById("nonprintable");
  e.id = "printable";
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p>and the wordpress code looks like this:</p>
  
  <pre><code>&lt;?php
          $args = array('post_type' =&gt; 'attachment', 'post_parent' =&gt; $post-&gt;ID,  'orderby' =&gt; 'menu_order', 'order' =&gt; 'ASC'); 
                  $attachments = get_children($args); 
  foreach ( $attachments as $attachment_id =&gt; $attachment ) {
  
  
  echo '&lt;span id="nonprintable"  onClick="changeid()" &gt;';
             echo wp_get_attachment_image( $attachment-&gt;ID, 'large' );
  
        echo '&lt;/span&gt;';
  
            }
  
  
  ?&gt;  
  </code></pre>
  
  <hr>
  
  <p>Right now when I click on a span I see that it changes the id. But it changes it just top to bottom with every click on a span and not on a specific span I click. </p>