Hidden drop-down option box once selected disappears

Please pardon me as I am a new member here. I can't seems to make the code work properly. The select options allows various selection of sizes. If the custom size is selected, a hidden drop-down option box appears. The problem here is once that drop-down option box is selected, it disappears. I have been trying to figure this out for months. Hope someone out there can help me out. My advance thanks!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery Show Hide Using Select Box</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("select").change(function() {
        $(this).find("option:selected").each(function() {
          if ($(this).attr("value") == "customsize") {
            $(".customsize").show();
          } else {
            $(".box").hide();
          }
        });
      }).change();
    });
  </script>
</head>
<body>
  <div>
    <select name="product[]" style="display: block; width: 256px; border-color: rgb(204, 204, 204); font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif; font-size: 0.9em; padding: 0.3em;">
      <option>Select Size</option>
      <option style="box-sizing: border-box;" value="30">Chest 30in</option>
      <option style="box-sizing: border-box;" value="32">Chest 32in</option>
      <option style="box-sizing: border-box;" value="34">Chest 34in</option>
      <option style="box-sizing: border-box;" value="36">Chest 36in</option>
      <option style="box-sizing: border-box;" value="38">Chest 38in</option>
      <option style="box-sizing: border-box;" value="40">Chest 40in</option>
      <option value="customsize">Custom Size*</option>
    </select><br />
  </div>
  <div class="customsize box">
    <select name="product[]" style="display: block; width: 256px; border-color: #cccccc; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 0.9em; padding: 0.3em;">
      <option style="box-sizing: border-box;" value=" ">Body Length (in)</option>
      <option style="box-sizing: border-box;" value="30">30</option>
      <option style="box-sizing: border-box;" value="31">31</option>
      <option style="box-sizing: border-box;" value="32">32</option>
      <option style="box-sizing: border-box;" value="33">33</option>
      <option style="box-sizing: border-box;" value="34">34</option>
      <option style="box-sizing: border-box;" value="35">35</option>
      <option style="box-sizing: border-box;" value="36">36</option>
      <option style="box-sizing: border-box;" value="37">37</option>
      <option style="box-sizing: border-box;" value="38">38</option>
      <option style="box-sizing: border-box;" value="39">39</option>
      <option style="box-sizing: border-box;" value="40">40</option>
    </select><br />
  </div>
</body>
</html>

Solution

You're selecting both select elements with your jQuery selector. Instead give the top <select> an id="pick_size". Then in your jQuery change $("select") to $("#pick_size") and it would work.

Here's a working fiddle.