JSFiddle - React, Tailwind, and code Playground

HTML

<form id="">
      <select name="prod" id="selectprod">
        <option value="showallprod">Select</option>
        <option>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 () {
   $prod = $("select[name='prod']");
   $ph = $("select[name='ph']");
   $prod.change(function () {
       if ($(this).val() == "One") {
           $("select[name='ph'] 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);
       }
       if ($(this).val() == "Select") {
           $("select[name='ph'] option").remove();
           $("<option value=\"showallprod\">Select</option>").appendTo($ph);
       }
   });
    $('#selector').change(function(){
        var selectedmodel = $("#selector").val();
        $(".container").hide();
        $('#' +selectedmodel').parent('.container').show();
        //$('#' +selectedmodel).show();

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