Radio Button add url parameter - html

Question

i am trying to add url parameter like ( www.example.com/product#green) this but i need multiple paramater like ( www.example.com/product#green#large ) after first parameter add size i wrote something but it doesn't work properly. But when user select size first should push parameter. When user click colour then size www.example.com/product#green#large
And i have another problem when i refresh the page the parameters stay there.I need to clear url parameters.I added jsFiddle link down below.
How can i do this with jquery.
var currentUrl = window.location.href;
$("#colour-stage label").click(function() {
var valColourInput = $('input[name=colour]:checked').val();
document.location.href = currentUrl + '#' + valColourInput;
});
$("#size-stage label").click(function() {
var valSizeInput = $('input[name=size]:checked').val();
document.location.href = currentUrl + '#' + valSizeInput;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="get">
<fieldset id="colour-stage">
<legend>
Colours:
</legend>
<label>
<input type="radio" name="colour" value="Red">
<span>Red</span>
</label>
<label>
<input type="radio" name="colour" value="Blue">
<span>Blue</span>
</label>
<label>
<input type="radio" name="colour" value="Yellow">
<span>Yellow</span>
</label>
<label>
<input type="radio" name="colour" value="Green">
<span>Green</span>
</label>
</fieldset>
<fieldset id="size-stage">
<legend>
Size:
</legend>
<label>
<input type="radio" name="size" value="Small">
<span>Small</span>
</label>
<label>
<input type="radio" name="size" value="medium">
<span>Medium</span>
</label>
<label>
<input type="radio" name="size" value="large">
<span>Large</span>
</label>
</fieldset>
</form>
https://jsfiddle.net/tolga748/06ekvf72/