title: My Javascript in django is only working once
body: <p>Im creating a online pizza ordering site in django. When the user is ordering the pizza the price of the pizza change according to the selected size of the pizza for this im using javascript to show the price of selected size and hide the remaining.
  im using javascript to show the block of selected pizza price and hide the others but the problem is that the javascript only work on the first div when i try to change the size of piza in second div it does nothing. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function selectFunction() {
  
    var size = document.getElementById("select");
    var option = size.options[size.selectedIndex].text;
  
    if(option=="Select Size"){
      document.getElementById("price").innerHTML = "Rs.";
    }
  
    if(option=="Large"){
      x = document.getElementById("l-price");
      x.style.display = "block";
      y = document.getElementById("m-price");
      z = document.getElementById("s-price");
      y.style.display = "none";
      z.style.display = "none";
    }
  
    if(option=="Medium"){
      x = document.getElementById("m-price");
      x.style.display = "block";
      y = document.getElementById("l-price");
      z = document.getElementById("s-price");
      y.style.display = "none";
      z.style.display = "none";
    }
  
    if(option=="Regular"){
      x = document.getElementById("s-price");
      x.style.display = "block";
      y = document.getElementById("m-price");
      z = document.getElementById("l-price");
      y.style.display = "none";
      z.style.display = "none";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{% extends "pizza_app/base.html" %}
  {% load static %}
  {% block content %}
  &lt;div class="md-padding" style="width:92%; margin-left:auto; margin-right:auto;"&gt;
     &lt;form method="post"&gt;
      &lt;div class="row"&gt;
          &lt;div class="section-header text-center" &gt;
                  &lt;h2 style="color:rgba(255, 255, 255, .9);"&gt;Pizza Menu&lt;/h2&gt;
          &lt;/div&gt;
          {% for pizza in pizzamenu %}
          &lt;div class="col-md-6 col-sm-12 col-xs-12 pizza-menu"&gt;
              &lt;div class="col-md-4 col-sm-12 col-xs-12 text-center" style="min-width:150px; padding: 0;"&gt;
                  &lt;div class="menuimg "&gt;
                      &lt;img class="img-responsive" src="{{pizza.image.url}}"&gt; 
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div style="padding: 0;" class="col-md-offset-0 col-md-8 col-sm-offset-0 col-sm-12 col-xs-12 padding945"&gt;
                  &lt;div class="menu"&gt;
                      &lt;h4&gt;{{pizza.name}}&lt;/h4&gt;
                      &lt;span style="padding:0px; margin:0px;"&gt; 
                          &lt;img src="" style="width:130px; margin:0px; margin-top:-35px;"&gt;
                          &lt;p id="menup"&gt;{{pizza.detail}}&lt;/p&gt;          
                      &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-12 col-sm-12 col-xs-12 dsize"&gt;
                      &lt;div class="form-control "&gt;
                         &lt;select class="select-style" id="select" onchange="selectFunction()"&gt;
                              &lt;option value="" selected disabled hidden&gt;Select Size&lt;/option&gt;
                              &lt;option value="{{pizza.s_price}}"&gt; Regular&lt;/option&gt;
                              &lt;option value="{{pizza.m_price}}"&gt; Medium &lt;/option&gt;
                              &lt;option value="{{pizza.l_price}}"&gt; Large&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt; 
  
                  &lt;div class="col-md-12 col-sm-7 col-xs-6 " &gt;
                      &lt;h2 style="margin-top:10px;" id="s-price" class="price-position" &gt;Rs.{{pizza.s_price}}&lt;/h2&gt;
                      &lt;h2 style="margin-top:10px;" id="m-price" class="price-position" &gt;Rs.{{pizza.m_price}}&lt;/h2&gt;
                      &lt;h2 style="margin-top:10px;" id="l-price" class="price-position" &gt;Rs.{{pizza.l_price}}&lt;/h2&gt;
                  &lt;/div&gt;
                      
                  &lt;div class=" text-center col-md-12 col-sm-6 col-xs-1 add-to-cart"&gt;
                      &lt;a class="add-to-cart" href="#" onclick="sizeCheck()"&gt;Add to cart&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
          &lt;/div&gt;
           
          {% endfor %}
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;    
  
  {% endblock content %}</code></pre>
  </div>
  </div>
  </p>