It was pointed out by David Thomas that the 2nd group should probably use radio buttons instead of checkboxes. It doesn't make much sense to allow users to select multiple choices in the 2nd group.
One approach would be to listen for clicks and dynamically modify a link based on user interaction.
Here's how you can set up a link that can be updated:
<a id="next-link" href="#">Link to Next Page</a>
Then, apply event listeners and functions to update the link on the go:
function changeLink(){
document.getElementByID('next-link').setAttribute('href') = "/"+goto_link_level+"/"+goto_link_category;
}
// You can also set default values here
var goto_link_level = '';
var goto_link_category = '';
// Event listeners for the groups
document.getElementsByClassName('group-1').addEventListener('click',function () {
goto_link_level = this.getAttribute('value');
changeLink();
},false);
document.getElementsByClassName('group-2').addEventListener('click',function () {
goto_link_category = this.getAttribute('value');
changeLink();
},false);
This setup will dynamically generate a relative link based on the selected options.
Example: "/level-1/addition"
Please note: This code has not been tested, but it is expected to function as intended.