Why only one javascript in the body works?

Question

I have two javascripts

<script type="text/javascript">
    $("#cexpiryyear li").on('click',function () {
        var selectedOption1 = $(this).attr('data-value');
        $("#expiry_year").val(selectedOption1);
        alert( $("#2ndexpiry_year").val());
    });
</script>

<script type="text/javascript">
    $("#cexpirymonth li").on('click',function () {
        var selectedOption = $(this).attr('data-value');
        $("#expiry_month").val(selectedOption);
        alert( $("#expiry_month").val());
    });
</script>

They are place before the </body>. But only the script which is in the last works and the first one wont work.Any solution for this. Why does it happen?

The html is given below

 <div class="clearfix">                
                <div class="inline pull-left m-r">


                  <div id="mySelect" class="select btn-group m-b" data-resize="auto">
                    <button style="font-weight:700;background-color:#fff;border-style:solid;
border-width:2px" type="button" id="expirymonth" name="expirymonth" data-toggle="dropdown" class="btn btn-white btn-sm dropdown-toggle">
                      <span class="dropdown-label"></span> <span class="caret"></span>
                    </button>
              <input type="hidden" id="expiry_month" name="expiry_month"/>
                    <ul id="cexpirymonth" class="dropdown-menu">
                      <li data-value="00" data-selected="true" ><a href="#">Select Month</a></li>
                      <li data-value="01"  class="selectOption"  ><a href="#">01</a></li>
                      <li data-value="02" ><a href="#">02</a></li>
             <li data-value="03" ><a href="#">03</a></li>
                      <li data-value="04" ><a href="#">04</a></li>
             <li data-value="05" ><a  href="#">05</a></li>
                      <li data-value="06" ><a  href="#">06</a></li>
             <li data-value="07" ><a  href="#">07</a></li>
                      <li data-value="08" ><a  href="#">08</a></li>
             <li data-value="09" ><a  href="#">09</a></li>
                      <li data-value="10" ><a  href="#">10</a></li>
             <li data-value="11" ><a href="#">11</a></li>
                      <li data-value="12" ><a href="#">12</a></li>


                    </ul>
                  </div>
</div>
<div class="inline pull-left m-r">

                  <div id="mySelect" class="select btn-group m-b" data-resize="auto">
                    <button style="background-color:#fff;font-weight:700;border-style:solid;
border-width:2px;" type="button" id="expiryyear" name="expiryyear" data-toggle="dropdown" class="btn btn-white btn-sm dropdown-toggle">
                      <span class="dropdown-label"></span> <span class="caret"></span>
                    </button>
            <input type="hidden" id="expiry_year" name="expiry_year"/>
                    <ul id="cexpiryyear" class="dropdown-menu">
<li data-value="2011" data-selected="true"><a href="#">Select Year</a></li>
<li data-value="2012"><a href="#">2012</a></li>
<li data-value="2013"><a href="#">2013</a></li>
<li data-value="2014"><a href="#">2014</a></li>
<li data-value="2015"><a href="#">2015</a></li>
<li data-value="2016"><a href="#">2016</a></li>
<li data-value="2017"><a href="#">2017</a></li>
<li data-value="2018"><a href="#">2018</a></li>
<li data-value="2019"><a href="#">2019</a></li>
<li data-value="2020"><a href="#">2020</a></li>
<li data-value="2021"><a href="#">2021</a></li>
<li data-value="2022"><a href="#">2022</a></li>
<li data-value="2023"><a href="#">2023</a></li>
<li data-value="2024"><a href="#">2024</a></li>
<li data-value="2025"><a href="#">2025</a></li>
<li data-value="2026"><a href="#">2026</a></li>
<li data-value="2027"><a href="#">2027</a></li>
<li data-value="2028"><a href="#">2028</a></li>
<li data-value="2029"><a href="#">2029</a></li>
<li data-value="2030"><a href="#">2030</a></li>
<li data-value="2031"><a href="#">2031</a></li>
<li data-value="2032"><a href="#">2032</a></li>
<li data-value="2033"><a href="#">2033</a></li>
<li data-value="2034"><a href="#">2034</a></li>
<li data-value="2035"><a href="#">2035</a></li>
<li data-value="2036"><a href="#">2036</a></li>

                    </ul>
                  </div>

</div>
</div>
  </div>

Only the last javascript works,and not the one above it.I tried plaing them in a single tag,but not working

Answer 1

Apart from the fact that there is no reason for you to put everything in several tags, you should only bind event when the page is loaded.

Thus:

$(document).ready(function() {
    $("#cexpiryyear li").on('click',function () {
         var selectedOption1 = $(this).attr('data-value');
        $("#2ndexpiry_year").val(selectedOption1);
        alert( $("#2ndexpiry_year").val());
    });
}

Answer 2

id's can't start with a number - the script is actually running, but 2ndexpiry_year is an invalid id.