title: Get all inputs with random ID inside a div
body: <p>Trying to get the values of all inputs inside a div. The inputs are options with a product.</p>
  
  <p>The product div ID is like this:</p>
  
  <pre><code>&lt;div class="row border" id="p-$productID"&gt;
  </code></pre>
  
  <p>Each unique input id in the (product) list is generated like this:</p>
  
  <pre><code>p-$productID-$otherkeyThatIsNeverTheSame
  </code></pre>
  
  <p>We get $productID from the data-name value of the button clicked.</p>
  
  <p>Below I am trying to find a way how @RomainGuidoux explains it here: <a href="https://stackoverflow.com/questions/609382/jquery-selector-id-ends-with">jQuery Selector: Id Ends With?</a>.</p>
  
  <p>Just can't seem to make this work.</p>
  
  <pre><code>$('.btn#add_item').on('click', function () {
          var prod = $(this).attr('data-name');
  
      var allVal = '';
      $("[id^='p-'+prod+'] &gt; input").each(function() {
          allVal += '&amp;' + $(this).attr('name') + '=' + $(this).val();
      });
      alert(allVal);
  });
  </code></pre>
  
  <p>The iteration is like this:</p>
  
  <pre><code>&lt;select class="form-control" id="p-1-1" name="A"&gt;
  &lt;option&gt;Type broodje&lt;/option&gt;
  &lt;option value="Witte pistolette"&gt;Witte pistolette&lt;/option&gt;
  &lt;option value="Bruine pistolette"&gt;Bruine pistolette&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select class="form-control" id="p-1-2" name="B"&gt;
  &lt;option&gt;Boter&lt;/option&gt;
  &lt;option value="Met boter"&gt;Met boter&lt;/option&gt;
  &lt;option value="Zonder boter"&gt;Zonder boter&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select class="form-control" id="p-1-3" name="C"&gt;
  &lt;option&gt;beleg&lt;/option&gt;
  &lt;option value="Standaard belegd"&gt;Standaard belegd &lt;/option&gt;
  &lt;option value="Dubbel Belegd"&gt;Dubbel Belegd&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>