title: Simplify multiple output calculations
body: <p>I have the following code that provides me with the calculation that I need, but I want it to work with multiple outputs.</p>
  
  <p>For example, Part A and Part B would have the same jQuery, except Part B may have a different multiplier or <code>calc3</code>, etc. </p>
  
  <p>I will have up to 50 parts and am trying to prevent from having to write 50 rows of jQuery. Is there a way to write this with the (this) variable instead of the (<code>'#id'</code>) ?</p>
  
  <p>In the Snippet below, if you add in the Qty, Width, Height, and Depth - you will see the calculation work for Part A, but not Part B because I am trying to make the jQuery calculations simple.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//part1
  $("#part1d").keyup(function() {
    //part A
    $('#part1A').val($('#part1q').val() * 1);
    $('#part1AL').val($('#part1w').val() - $('#calc1').val());
    $('#part1AW').val($('#part1d').val() - $('#calc2').val());
    //part B
    $('#part1A').val($('#part1q').val() * 2);
    $('#part1AL').val($('#part1w').val() - $('#calc1').val());
    $('#part1AW').val($('#part1d').val() - $('#calc2').val());
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    float: left;
  }
  
  .wrap {
    width: 96%;
    margin: 2% 2% 500px 2%;
  }
  
  .partwrap {}
  
  .partname {
    width: 20%;
    margin: 1% 20% 1% 0;
  }
  
  .partdata {
    width: 10%;
  }
  
  input {
    width: auto;
    float: none;
  }
  
  .sectiontitle {
    color: red
  }
  
  .partdescr {
    color: purple;
  }
  
  .parts {
    width: 150px;
  }
  
  .values {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!--values--&gt;
  &lt;input class="values" id="calc1" value="1.4375"&gt;
  &lt;input class="values" id="calc2" value=".25"&gt;
  
  &lt;div class="wrap"&gt;
    &lt;!--part 1--&gt;
    &lt;!--part 1 input--&gt;
    &lt;div class="partwrap"&gt;
      &lt;div class="partdescr"&gt;
        &lt;div class="partname"&gt;Part Number: &lt;input id="part1"&gt;&lt;/div&gt;
        &lt;div class="partdata"&gt;Qty &lt;input id="part1q"&gt;&lt;/div&gt;
        &lt;div class="partdata"&gt;Width &lt;input id="part1w"&gt;&lt;/div&gt;
        &lt;div class="partdata"&gt;Height &lt;input id="part1h"&gt;&lt;/div&gt;
        &lt;div class="partdata"&gt;Depth &lt;input id="part1d"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
      &lt;!--part 1 output--&gt;
      &lt;div class="partdescr"&gt;
        &lt;div class="parts"&gt;Part Name&lt;/div&gt;
        &lt;div class="parts"&gt;Qty&lt;/div&gt;
        &lt;div class="parts"&gt;Length&lt;/div&gt;
        &lt;div class="parts"&gt;Width&lt;/div&gt;
        &lt;div class="parts"&gt;Height&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;div class="parts"&gt;Part A&lt;/div&gt;
        &lt;input id="part1A" class="parts"&gt;
        &lt;input id="part1AL" class="parts"&gt;
        &lt;input id="part1AW" class="parts"&gt;
        &lt;input id="part1AH" class="parts"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div class="parts"&gt;Part B&lt;/div&gt;
        &lt;input id="part1A" class="parts"&gt;
        &lt;input id="part1AL" class="parts"&gt;
        &lt;input id="part1AW" class="parts"&gt;
        &lt;input id="part1AH" class="parts"&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>