title: JQUERY change div contents based on select options -- I'm lost
body: <p>In the following code, I have two dropdowns, unit-type and unit-size. I have two , unit-price and row-total, that need to be updated, first on page load, then whenever one or both dropdowns are changed.</p>
  
  <p>The problem is that I'm new to Javascript and Jquery and really don't know what I'm doing, and none of the examples I've tried following seems to work for me. I'm hoping someone here can point me to where my problem is and how to make it work?</p>
  
  <pre><code>    &lt;?php 
  session_start();
  
  include '../include/search.php';
  
  $dbserver = '#########';
      $dbname = '########';
      $dbuser = '########';
      $dbpassword = '#########';
  
      $category = $_GET['category'];
      $db = mysqli_connect($dbserver, $dbuser, $dbpassword, $dbname);
  
      if (mysqli_connect_errno()) {
          die("Connection failed: " . mysqli_connect_error());
      }
      mysqli_select_db($db, $dbname);
      $sql = "SELECT * FROM products WHERE category = '".$category."'";
      $result = mysqli_query($db, $sql);
  
      if (!$result) {
          die ('Error: Could not select products'.mysqli_error($db));
      } 
  
     function make_size_select($product) {
      echo '&lt;select name="unit_menu"&gt;';
      $price_set = array(
          'halfpint'=&gt;$product['halfpint'],
          'pint'=&gt;$product['pint'],
          'dk'=&gt;$product['dk'],
          'quart'=&gt;$product['quart']);
  
      $handles = array(
          'halfpint'=&gt;'Half Pint (8 oz)',
          'pint'=&gt;'Pint (16 oz)',
          'dk'=&gt;'Dutch Kettle (16 oz)',
          'quart'=&gt;'Quart (32 oz)');
  
      $i = 0;
  
      foreach ($price_set as $key=&gt;$value) {
          if ( $value &gt; 0.00) {
              $i++;
              if ($i == 1) {
                  echo '&lt;option value="'.$value.'" selected="selected"&gt;'.$handles[$key].'&lt;/option&gt;';
              } else {
                  echo '&lt;option value="'.$value.'"&gt;'.$handles[$key].'&lt;/option&gt;';
              }
          }
      }
      echo '&lt;/select&gt;';
  }
  
  function category_select($product) {
          $categories = array();
          foreach ($product as $row) {
              if (!in_array($row['category'], $categories)) {
                  array_push($row['category']);
              }
          }
          echo '&lt;select name="categories" onChange="loadNewCategory();"&gt;';
              foreach ($categories as $category) {
                  echo '&lt;option '.$category.'&gt;'.ucfirst($category);
              }
          echo '&lt;/select&gt;';           
      }
  
  ?&gt;
  
  &lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Smoky Mountain Honey House&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
    &lt;link href="../css/style.css" rel="stylesheet" type="text/css"  media="all" /&gt;
    &lt;link href="../css/custom.css" rel="stylesheet" type="text/css"  media="all" /&gt;
    &lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;
    &lt;script type="text/javascript" src="../js/jquery-1.9.0.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="../js/menu.js"&gt;&lt;/script&gt; 
  
   &lt;/head&gt;
  &lt;body&gt;
  &lt;!----start-header-----&gt;
       &lt;div class="header_img"&gt;
         &lt;img src="../images/header_img.jpg" alt="" /&gt;
           &lt;div class="wrap"&gt;
              &lt;div class="header"&gt;                
                      &lt;div class="logo"&gt;
                        &lt;a href="index.html"&gt;&lt;img src="../images/logo.png" alt=""&gt;&lt;/a&gt;
                    &lt;/div&gt;
                     &lt;div class="menu"&gt;
                        &lt;nav class="clearfix"&gt;
                          &lt;ul class="clearfix"&gt;
                                    &lt;li class="active"&gt;&lt;a href="../index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="../about.html"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="../contact.html#map"&gt;LOCATIONS&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="../store.html"&gt;SHOP&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="../contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;    
                           &lt;/ul&gt;
                          &lt;a href="#" id="pull"&gt;Menu&lt;/a&gt;
                        &lt;/nav&gt;
                    &lt;/div&gt;                 
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
     &lt;!----End-header-----&gt;
  
  &lt;div class="wrap"&gt;
      &lt;div class="content"&gt;
          &lt;div class="category-header"&gt;
              &lt;h2&gt;&lt;?php echo ucfirst($category); ?&gt;&lt;/h2&gt;
              &lt;!-- &lt;div class="product-search"&gt;
                  &lt;p&gt;
                  Search our inventory: &lt;form name="search" action="../include/functions.php?method=search" method="post"&gt;
                      &lt;input type="text" name="search_terms" /&gt;
                      &lt;input type="submit" value="submit" /&gt;
                  &lt;/form&gt;
                  &lt;/p&gt;
              &lt;/div&gt; --&gt;
          &lt;/div&gt;
      &lt;?php 
      while ( $product =  mysqli_fetch_array( $result, MYSQLI_ASSOC ) ) {
              // display product ?&gt;
              &lt;div class="product_row"&gt;
                  &lt;script&gt;
                      var product = &lt;?php echo json_encode($product); ?&gt;
                  &lt;/script&gt;
              &lt;form name="order_row_&lt;?php echo $product['product_id']; ?&gt;" action="#" method="post"&gt;
                  &lt;div class="product_id"&gt;
                      &lt;input type="hidden" name="product_id" value="&lt;?php echo $product['product_id']; ?&gt;"&gt;
                      &lt;?php echo ucfirst($product['name']); ?&gt;
                  &lt;/div&gt;
                  &lt;div class="type"&gt;
                      &lt;select name="unit_type"&gt;
                          &lt;option value="ind" selected&gt;By the Jar&lt;/option&gt;
                          &lt;option value="case"&gt;By the Case&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="unit"&gt;
                      &lt;?php echo make_size_select($product); ?&gt;
                  &lt;/div&gt;
                  &lt;div class="unit-price"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="qty"&gt;
                      &lt;input type="number" name="qty" min="0" maxlength="5" max="11" label="How many?" /&gt;
                  &lt;/div&gt;
                  &lt;div class="row-price"&gt;&lt;/div&gt;
                  &lt;div class="add_cell"&gt;
                      &lt;button class="add-to-cart" onclick="addToCart();"&gt;Add To Cart&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
              &lt;/div&gt;
          &lt;?php }; ?&gt;
  
    &lt;/div&gt; 
  &lt;/div&gt;
  
  
  &lt;div class="copy-right"&gt;
          &lt;p&gt;&amp;copy; 2016 Smoky Mountain Honey House&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
   &lt;!---End-footer----&gt;
   &lt;script&gt;
   $( ".unit_type" ).change(function () {
       var unitPrice = $(this).val();
       if ( $(this).closest.(".unit_type") == "ind") {
           unitPrice = unitPrice / 12.00;
       }
      $( this ).closest.( ".unit-price" ).text( unitPrice );
    })
    .change();
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>