Creating my own select navigation plugin

Creating my own select navigation plugin

Hello,

I've stopped developing websites many years ago but want to pick up my old hobby again. Please take a look at the following code:

<button><</button>
<select name="fontsize">
<option value="8px">8px</option>
<option value="10px">10px</option>
<option value="12px">12px</option>
<option value="14px">14px</option>
<option value="16px">16px</option>
<option value="20px">20px</option>
<option value="24px">24px</option>
</select>
<button>></button>

I want to create a plugin that changes the select-option from the dropdown selection to selection through buttons navigation. The plugin should do the following on this piece of code:

1) hide the dropdown arrow of the select tag
2) deactivate the dropdown menu (if the select-option is clicked the dropdown menu should NOT be displayed)
3) navigation through the different options should be solely done through the "<" and ">" buttons
4) when the button "<" is clicked, we navigate upwards from the current selected option and the new option is displayed
5) when the button ">" is clicked, we navigate downwards from the current selected option and the new option is displayed

I have several of these select-options tag and want to create a solution using a plugin. I have no idea how to start creating this plugin. Can you guys help me out, maybe point me in the right direction? 

P.S. Maybe such plugin already exist?