title: JavaScript: how to select class A inside class B inside id X when there are two class B elements?
body: <p>I need to access a class using JavaScript document.querySelector. How can I access a class (.btnCancel) inside a class (.formBox) inside an id (#add-occasion), when there are two similar named .formBox classes inside the #add-occasion id? I have lots of modals with the same class names for buttons and different modal ids. </p>
  
  <pre><code>&lt;div data-role="modal" id="add-occasion"&gt;
      &lt;h3&gt;Add new occasion&lt;/h3&gt;
      &lt;form&gt;
          &lt;div class="formBox"&gt;
              &lt;input type="text" id="new-occ" value="" placeholder="" class="" /&gt;
          &lt;/div&gt;
          &lt;div class="formBox"&gt;
              &lt;input type="button" class="btnCancel" value="CANCEL" /&gt;
              &lt;input type="button" class="btnSave" value="SAVE" /&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>