JSFiddle - React, Tailwind, and code Playground

HTML

<form id="">
      <select name="prod" id="selectprod">
        <option value="showallprod">Select</option>
        <option value="one">One</option>
      </select>
      <select name="ph" id="selector">
        <option value="showall">Select sub</option>
      </select>
    </form>

    <div class="container">
      <div id="one" class="phone">Content one</div>
    </div>

    <div class="container">
      <div id="two" class="phone">Content two</div>
    </div>

CSS

.container {
  width:200px;
  border:1px solid #d3d3d3;
  float: left;
  margin-right:10px;
}

JavaScript

$(document).ready(function () {
    var $prod = $("#selectprod"),
        $ph = $("#selector");
    
    $prod.change(function () {
       switch($(this).val()) {
           case "one":
               $("#selector option").remove();
               $("<option value=\"showall\">Select sub</option>").appendTo($ph);
               $("<option value=\"one\">One sub</option>").appendTo($ph);
               $("<option value=\"two\">Two sub</option>").appendTo($ph);
               break;
        
           case "select":
               $("#selector option").remove();
               $("<option value=\"showallprod\">Select</option>").appendTo($ph);
               break;
               
           default:
               break;
       }
    });
    
    $ph.change(function(){
        var selectedmodel = $("#selector").val();
        $(".container").hide();
        $('#' + selectedmodel).parent('.container').show();
        //$('#' +selectedmodel).show();

        if($("#selector").val() == 'showall') {
           $('.phone').show();
        }
    });
});