Hide option from select control on button click

Question

how can I hide options with value 24 and 32 on inputelement.attr("id") === "tv1" and for all other options hide displayed values with (4.00, 12.00) this is my current code that doesn't work very well with showing and hiding options.

if (inputElement.attr("id") === "tv1") {
        $("#zstbox option[value='24.00']").wrap('<span/>')
        $("#zstbox option[value='32.00']").wrap('<span/>')
    } else {
        if ($("#zstbox option['value=24.00']").parent().is("span")) {
            $("#zstbox option['value=24.00']").unwrap();
        }
        if ($("#zstbox option['value=32.00']").parent().is("span")) {
            $("#zstbox option['value=32.00']").unwrap();
        }
    }
    if (inputElement.attr("id") !== "tv1") {
        $("#zstbox option[value='4.00']").wrap('<span/>')
        $("#zstbox option[value='12.00']").wrap('<span/>')
    } else {
        if ($("#zstbox option['value=4.00']").parent().is("span")) {
            $("#zstbox option['value=4.00']").unwrap();
        }
        if ($("#zstbox option['value=12.00']").parent().is("span")) {
            $("#zstbox option['value=12.00']").unwrap();
        }
    }

<span class="circle-buttons">
                                                                                                <label for="tv1" class="label-wrap" onclick="checkTv(event)"> Button1
<input type="radio" name="tv" id="tv1" value="4">
<div class="check"></div>
</label>
<span class="price">4.00</span>
</span> 
<span class="tv-option-wrapper">
<span class="circle-buttons">
<label for="tv2" class="label-wrap" onclick="checkTv(event)">Button2
<input type="radio" name="tv" id="tv2" value="8">
<div class="check"></div>
</label>
<span class="price">8.00</span>
</span>
</span>
<span class="tv-option-wrapper">
<span class="circle-buttons">
<label for="tv3" class="label-wrap" onclick="checkTv(event)">Button3
<div class="check"></div>
</label>
<span class="price">16.00</span>
</span>
</span>
<span class="tv-option-wrapper">
<span class="circle-buttons">
<label for="tv5" class="label-wrap" onclick="checkTv(event)">Button4
<input type="radio" name="tv" id="tv5" value="20">
<div class="check"></div>
</label>
<span class="price">20.00</span>
</span>
</span>

<!-- select options -->

<select class="form-control" name="zstbox" id="zstbox"  onchange="checkZstbox(event)">
    <option value="0">please select</option>
    <option value="4.00">Option 2 <span class="price">4.00</span> </option>
    <option value="8.00">Option 3 <span class="price">8.00</span> </option>
    <option value="12.00">Option 4 <span class="price">12.00</span> </option>
    <option value="16.00">Option 5 <span class="price">16.00</span> </option>
    <option value="8.00">Option 2 <span class="price">8.00</span> </option>
   <option value="16.00">Option 3 <span class="price">16.00</span> </option>
    <option value="24.00">Option 4 <span class="price">24.00</span> </option>
   <option value="32.00">Option 5 <span class="price">32.00</span> </option>
</select>

Where am I wrong?

The result should be: to display options with values

 <option value="4.00">Option 2 <span class="price">4.00</span> </option>
    <option value="8.00">Option 3 <span class="price">8.00</span> </option>
    <option value="12.00">Option 4 <span class="price">12.00</span> </option>
    <option value="16.00">Option 5 <span class="price">16.00</span> </option>

on id = "tv1" and with all other TV options to display values

    <option value="8.00">Option 2 <span class="price">8.00</span> </option>
   <option value="16.00">Option 3 <span class="price">16.00</span> </option>
    <option value="24.00">Option 4 <span class="price">24.00</span> </option>
   <option value="32.00">Option 5 <span class="price">32.00</span> </option>

Thanks to everyone for their help