JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <button id="add_item" type="button" class="btn" data-name="3"> Add Item </button>
    <div id="p-3-12">
      <input type="text" name="productName" value="Square" />
      <input type="text" name="productQuantity" value="12" />
    </div>
    <div id="p-3-5565">
      <input type="text" name="itemName" value="Cup" />
      <input type="text" name="itemQuantity" value="5" />
    </div>
    <select class="form-control" id="p-3-1" name="A">
<option>Type broodje</option>
<option value="Witte pistolette">Witte pistolette</option>
<option value="Bruine pistolette">Bruine pistolette</option>
</select>

<select class="form-control" id="p-3-2" name="B">
<option>Boter</option>
<option value="Met boter">Met boter</option>
<option value="Zonder boter">Zonder boter</option>
</select>

<select class="form-control" id="p-3-3" name="C">
<option>beleg</option>
<option value="Standaard belegd">Standaard belegd </option>
<option value="Dubbel Belegd">Dubbel Belegd</option>
</select>

JavaScript

$(function() {
    $('.btn#add_item').on('click', function () {
    	var prodId = $(this).attr('data-name');
    
    	var allVal = '';
    	var pres = 'p-' + prodId;
    
    	$("div[id^="+pres+"] > input, select[id^="+pres+"]").each(function() {
    		allVal += '&' + $(this).attr('name') + '=' + $(this).val();
    	});
    
    	alert(allVal);
    });
});