To answer your first bullet point, you can use min, max, and step on the number input to get the up/down arrows to move between multiples of 12, like this:
<input type="number" min="12" max="5000" step="12">
To combine a dropdown/spinner and a number input, take a look at this question: Drop Down Menu/Text Field in one
The accepted answer should let you do what you need to do, although it takes a bit of coding. Another answer farther down suggests using <datalist>, which sort of works and is much simpler but behaves oddly after you enter a value into the input - the dropdown options disappear and you only see the current value as an option. If you're ok with that behavior and just want a simple solution, I recommend using something like below, but if you want something that works a little better, definitely take a look at the question linked above instead.
<input type="number" list="quantities" min="12" step="12">
<datalist id="quantities">
<option value="12">
<option value="24">
</datalist>
I didn't include all the options up to 5000, but you get the idea. I'm sure there's a way to fill in the options programmatically without typing them by hand, too - I would start by searching for "using an array as datalist options" or something if you're interested in doing that, although I've never done it myself. I imagine there's a way to create an array of options in JavaScript and pass it in.
