I have a form that requires a calculation when clicked on a multiple drop down selector, and still displays the clicks of the courses in real time and lastly calculates the sum total of the courses.<!DOCTYPE html><html><head><style>    div { color:blue; }    div#five { color:red; }    div#show_box {    background: wheat;    width: 120px;    height: 100px;    }    div#total_box {    width: 119px;    height: 60px;    background: pink;    margin-top: 20px;    }</style><script type=text/javascript src=jquery.js></script></head><body> <div id=one></div> <div id=two></div> <div id=three></div> <div id=four></div> <div id=five></div><script>var arr = [ one, two, three, four, five ];var obj = { one:1, two:2, three:3, four:4, five:5 };jQuery.each(arr, function() {  $(# + this).text(Mine is  + this + .);   return (this != three); // will stop running after three});jQuery.each(obj, function(i, val) {  $(# + i).append(document.createTextNode( -  + val));});</script><select id=wow multiple=multiple><option id=def value=default selected>select a course</option><option id=mth value=1>math</option><option id=eng value=2>english</option><option id=chm value=3>chem</option><option id=phy value=4>physics</option></select><div id=show_box><h6 id=1></h6><h6 id=2></h6><h6 id=3></h6><h6 id=4></h6><h6 id=5></h6></div><div id=total_box></div><script>//list all the view more in the clicks into arrays...            var vm_id=[1,2,3,4,5];            jQuery.each(vm_id, function() {                //$('button[value=' + this + ]')              $('option[value=' + this + ']').one('click',function()                {                    //this.value                    var price=[2000,3000,4000,5000,6000];                    if (this.value == 1)                     {                        $('#show_box > #1').html(price[0]);                        $('#1').after(<input type='hidden' id='2000' value= + price[0] + >);                        /*                        $('option[value=' + this + ']').off('click','option[value=' + this + ']',function()                        {                            $('#2000').remove('#2000');                        });                        */                    };                    if (this.value == 2)                     {                        $('#show_box > #2').html(price[1]);                        $('#2').after(<input type='hidden' id='3000' value= + price[1] + >);                    };                    if (this.value == 3)                     {                        $('#show_box > #3').html(price[2]);                        $('#3').after(<input type='hidden' id='4000' value= + price[2] + >);                    };                    if (this.value == 4)                     {                        $('#show_box > #4').html(price[3]);                        $('#4').after(<input type='hidden' id='5000' value= + price[3] + >);                    };                    if (this.value == 5)                     {                      $('#show_box > #5').html(price[4]);                      $('#5').after(<input type='hidden' id='6000' value= + price[4] + >);                    };                    //$(input:hidden).length                    //alert($(input:hidden).length);                    $(input:hidden).each(function(index,Element)                      {                          var sub=$(input:hidden).index();                          var in_len=$(input:hidden).length;                          if ((in_len == 1))                              {                                //var get_id=Element.id;                                var ids=[1000,2000,3000,4000,5000];                                $.each(ids,function(index,value)                                  {                                    var get_id=Element.id;                                      if (get_id == this)                                       {                                          $('#total_box').text(value);                                          //console.log(get_id + ':' + index + '=' + value);                                      };                                  });                            };                          if ((in_len == 2))                              {                              var ids=[1000,2000,3000,4000,5000];                                $.each(ids,function(index,value)                                  {                                    var get_id=Element.id;                                      if (get_id == this)                                       {                                          var in_len=$(input:hidden);                                          one=in_len[0].id;                                          two=in_len[1].id;                                          one=parseInt(one);                                          two=parseInt(two);                                          three= one + two;                                          $('#total_box').text(three);                                          //console.log(get_id + ':' + index + '=' + value);                                      };                                  });                              //var get_id=Element.id;                                /*                                var ids=[1000,2000,3000,4000,5000];                                $.each(ids,function(index,value)                                  {                                    var get_id=Element.id;                                      //console.log(get_id + ':' + index + '=' + value);                                  });                                */                            };                          if ((in_len == 3))                              {                              var ids=[1000,2000,3000,4000,5000];                                $.each(ids,function(index,value)                                  {                                    var get_id=Element.id;                                      if (get_id == this)                                       {                                          var in_len=$(input:hidden);                                          one=in_len[0].id;                                          two=in_len[1].id;                                          three=in_len[2].id;                                          one=parseInt(one);                                          two=parseInt(two);                                          three=parseInt(three);                                          four= one + two + three;                                          $('#total_box').text(four);                                          //console.log(get_id + ':' + index + '=' + value);                                      };                                  });                            };                          if ((in_len == 4))                              {                                var ids=[1000,2000,3000,4000,5000];                                $.each(ids,function(index,value)                                  {                                    var get_id=Element.id;                                      if (get_id == this)                                       {                                          price=[2000,3000,4000,5000,6000];                                          p1=price[0];                                          p2=price[1];                                          p3=price[2];                                          p4=price[3];                                          $('#total_box').text(p1+p2+p3+p4);                                      };                                  });                            };                      });                });            }); /*$('#mth').click(function(){    var wow_val=document.getElementById('mth').value;    alert(wow_val);});*/</script></body></html>I have solved the problem with this code, but I want to see other ways to solve it from other developers.
How to do a small calculation on a drop down when clicked?
javascript;jquery;dom