title: Keeping multiple onClick events independant yet functioning
body: <p>The following div stacks some images together</p>
  
  <pre><code>&lt;div class='small-6 medium-6 large-6 columns productimage'&gt;  
    &lt;img src='small/b6k7_fG1.png' name='bf' class='base' /&gt;  
    &lt;img src='small/seat_flex_G1.png' id='seat' name='seat'  class='overlay' style='z-index: 1' /&gt;  
    &lt;img src='small/back_ZS.png' id='back' name='back' class='overlay' style='z-index: 2' /&gt;  
    &lt;img src='small/back_support_G1.png' class='overlay' style='z-index: 3' /&gt;  
  &lt;/div&gt;  
  </code></pre>
  
  <p>The UI  alows the user to change attributes, some of which are linked together, and refresh the image with a given name  </p>
  
  <p>One set</p>
  
  <pre><code>&lt;div class="product"&gt;
    &lt;h6&gt;Arms&lt;/h6&gt;
    &lt;input type="radio" id="arms_" name="arms" value="_"&gt;&lt;label&gt;No Arms&lt;/label&gt;
    &lt;input type="radio" id="arms_f_" name="arms" value="_f_" checked="checked"&gt;&lt;label&gt;S Arms&lt;/label&gt;
    &lt;input type="radio" id="arms_fa_" name="arms" value="_f_"&gt;&lt;label&gt;A Arms&lt;/label&gt;
  &lt;/div&gt;  
  &lt;div class="product"&gt;
    &lt;h6&gt;Base and Frame&lt;/h6&gt;
    &lt;input type="radio" id="b_f[bG1_fG1]" name="b_f" value="bG1_fG1" checked="checked"&gt;
    &lt;input type="radio" id="b_f[b65_f6KA]" name="b_f" value="b65_f6KA"&gt;
    &lt;input type="radio" id="b_f[b6K8_fG1]" name="b_f" value="b6K8_fG1"&gt;
    &lt;input type="radio" id="b_f[b6K8_f6KA]" name="b_f" value="b6K8_f6KA"&gt;
    &lt;input type="radio" id="b_f[b6KA_fG1]" name="b_f" value="b6K8_fG1"&gt;
    &lt;input type="radio" id="b_f[b65_fG1]" name="b_f" value="b65_f6KA"&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>Second set</p>
  
  <pre><code>&lt;div&gt;
    &lt;input type="radio" id="seat_depth_" name="seat_depth" value="_" checked="checked"&gt;&lt;label&gt;Fixed &lt;/label&gt;
    &lt;input type="radio" id="seat_depth_flex_" name="seat_depth" value="_flex_"&gt;&lt;label&gt;Flex&lt;/label&gt;
  &lt;/div&gt;  
  &lt;div&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="seat_98" name="seat" value="98" checked="checked"&gt;&lt;img src="98.JPG"&gt;  &lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="seat_ZK" name="seat" value="ZK"&gt;&lt;img src="ZK.JPG"&gt;  &lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="seat_ZS" name="seat" value="ZS"&gt;&lt;img src="Zs.jpg"&gt;  &lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="seat_BRN" name="seat" value="BRN"&gt;&lt;img src="BRN.jpg"&gt;  &lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="seat_DTR" name="seat" value="DTR"&gt;&lt;img src="DTR.jpg"&gt;  &lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="seat_97" name="seat" value="97"&gt;&lt;img src="97.jpg"&gt;  &lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="seat_SG" name="seat" value="SG"&gt;&lt;img src="sg.jpg"&gt;  &lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="seat_G1" name="seat" value="G1"&gt;&lt;img src="g1.jpg"&gt;  &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Independant <code>onclick</code> input</p>
  
  <pre><code>&lt;div&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="back_98" name="back" value="98" checked="checked"  onclick='document.getElementById("back").src="small/back_98.png"'&gt;&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="back_ZK" name="back" value="ZK" onclick='document.getElementById("back").src="small/back_ZK.png"'&gt;&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="back_ZS" name="back" value="ZS" onclick='document.getElementById("back").src="small/back_ZS.png"'&gt;&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="back_BRN" name="back" value="BRN" onclick='document.getElementById("back").src="small/back_BRN.png"'&gt;&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="back_DTR" name="back" value="DTR" onclick='document.getElementById("back").src="small/back_DTR.png"'&gt;&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="back_97" name="back" value="97" onclick='document.getElementById("back").src="small/back_97.png"'&gt;&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="back_SG" name="back" value="SG" onclick='document.getElementById("back").src="small/back_SG.png"'&gt;&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" class='imagepick' id="back_G1" name="back" value="G1" onclick='document.getElementById("back").src="small/back_G1.png"'&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>as long as the interactivity is limited to a single set (+ independant onclick inputs):</p>
  
  <pre><code>$("input[type=radio]").on("change", function() {  
    var seat_image = $("input[name=seat_depth]:checked").val() + $("input[name=seat]:checked").val();  
    $("#seat").attr("src", "small/seat" +  seat_image  + ".png");  
  })  
  </code></pre>
  
  <p>the javascript fires properly</p>
  
  <p>however, adding radio inputs will fire the above javascript nonetheless and actually serve up a blank.<br>
  Wanting to add</p>
  
  <pre><code>$("input[type=radio]").on("change", function() {  
    var frame_image = $("input[name=arms]:checked").val() + $("input[name=b_f]:checked").val();  
    $("#bf").attr("src", "small/" +  frame_image  + ".png");  
  })  
  </code></pre>
  
  <p>fails as well.</p>
  
  <p>How can the javascript be refactored to fire only with a given input name (as in the first case one of the two <code>name</code> - seat or seat_depth),  is clicked, and thus coexist with other firing mechanisms,  while allowing independant onclick events to fire?</p>