title: Signature Pad: Capturing more than one signature
body: <p>I am using <a href="http://thomasjbradley.ca/lab/signature-pad/" rel="nofollow">Thomas J Bradley's Signature Pad</a>, but need it to be able to accept (and regenerate) two (or more) signatures at a time. And unfortunately, right now, I can only get the first canvas widget to accept a signature - the second canvas widget is unresponsive.</p>
  
  <p>Maybe I'm doing something wrong in the Javascript section?</p>
  
  <p>What do I need to change to make it accept two signatures in one form?</p>
  
  <pre><code>&lt;form method="post" action="" class="sigPad"&gt; 
  
  &lt;b&gt;Signature 1:&lt;/b&gt;
  &lt;br /&gt;
  
  &lt;ul class="sigNav"&gt;
      &lt;li class="clearButton"&gt;&lt;a href="#clear"&gt;Clear Signature&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="sig sigWrapper"&gt;
      &lt;div class="typed"&gt;&lt;/div&gt;
      &lt;canvas class="pad_1" width="490" height="130"&gt;&lt;/canvas&gt;
      &lt;input type="hidden" name="signature_pad_output_1" class="output_1"&gt;
  &lt;/div&gt;
  
  &lt;br&gt;
  Typed Name: &lt;input type="text" name="signature_name_1" value="" id="name_1" class="name_1"&gt;
  
  &lt;hr&gt;
  
  &lt;b&gt;Signature 2:&lt;/b&gt;
  &lt;br /&gt;
  
  &lt;ul class="sigNav"&gt;
      &lt;li class="clearButton"&gt;&lt;a href="#clear"&gt;Clear Signature&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="sig sigWrapper"&gt;
      &lt;div class="typed"&gt;&lt;/div&gt;
      &lt;canvas class="pad_2" width="490" height="130"&gt;&lt;/canvas&gt;
      &lt;input type="hidden" name="signature_pad_output_2" class="output_2"&gt;
  &lt;/div&gt;
  
  
  &lt;br&gt;
  Typed Name: &lt;input type="text" name="signature_name_2" value=""  id="name_2" class="name_2"&gt;
  
  
  
  &lt;script&gt;
      $(document).ready(function() {
  
          var options = {
              lineTop: 100
                      , drawOnly: true
                      , canvas: '.pad_1'
                      , output: '.output_1'
                      , name: '.name_1'
          };
  
          $('.sigPad').signaturePad(options);
  
          var options = {
              lineTop: 100
                      , drawOnly: true
                      , canvas: '.pad_2'
                      , output: '.output_2'
                      , name: '.name_2'
          };
  
          $('.sigPad').signaturePad(options);
  
  
      });
  &lt;/script&gt;          
  
  &lt;script src="/includes/signature-pad/build/json2.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Thank you in advance.</p>