jQuery error not visible when I migrate code

Well, I have the following page

link

The functional script

Already when I migrate to the bottom of the page:

link

Then the following errors occur:

1) I can no longer click on li's

2) The pointer effect does not appear when hovering over li's

I've tried everything but I can not.

And there's another thing:

link

It does not work in chrome , only in firefox

Here is the code for aa2.php

<script type="text/javascript" src="_js/jquery.js"></script>

CSS

@charset "utf-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}
body {
    margin: 0 auto;
    width: 800px;
}
.selectOptions select {
    display: none;
}
.selectOptions .selectOption:after {
    position: absolute;
    content: "";
    display: block;
    top: 1px;
    right: 1px;
    width: 33px;
    height: 33px;
    background-image: url(_imgs/setaBaixo.jpg);
}
.selectOptions .selectOption.setaBaixo:after {
    background-image: url(_imgs/setaBaixo.jpg);
}
.selectOptions .selectOption.setaCima:after {
    background-image: url(_imgs/setaCima.jpg);
}
.selectOptions .selectOption, ul {
    position: relative;
    width: 200px;
    height: 35px;
    background-color: rgba(0,0,0,0.2);
}
.selectOptions ul {
    overflow: hidden;
    list-style: none;
    z-index: -1;
}
.selectOptions ul li {
    width: 100%;
    height: 31px;
    line-height: 31px;
    cursor: pointer;
    padding: 2px;
    color: rgb(255,255,255);
    background-color: rgb(240,240,240);
    border-bottom: rgba(0,0,0,.1) 1px solid;
}
.selectOptions ul li:hover {
    color: rgb(255,255,255);
    background-color: rgba(0,0,0, .1);
}
.selectOptions ul li:hover + .selectOption:after {
    color: rgba(0,0,0, .1);
    background-color: rgb(255,255,255);
}

HTML

<div class="selectOptions">
  <select name="select" required>
    <option value="1">um</option>
    <option value="2">dois</option>
    <option value="3">Tres</option>
  </select>
  <div class="selectOption">
    <ul>
    </ul>
  </div>
</div>

jQuery

$(document).ready(function(e) {

  $(".selectOptions select").css("display", "none");

  contador = 0;

  $(".selectOptions .selectOption").click( function() {

      if(contador % 2 == 0) {
          $(".selectOptions ul").css("overflow", "visible") ;
          $(".selectOptions .selectOption").addClass("setaCima").removeClass("setaBaixo");
      } else {
           $(".selectOptions ul").css("overflow", "hidden");         
          $(".selectOptions .selectOption").addClass("setaBaixo").removeClass("setaCima");
      }

      $('.selectOptions .selectOption ul li').click(function(){ 
      alert();    
           $($(this).closest('ul')).prepend($(this)); 

           $(".selectOptions select option").filter(function() {
              return $(this).val() == $('.selectOptions .selectOption ul li').val();
           }).prop("selected", true);

      })

      contador++;
  }); 


  $(".selectOptions select > option").each(function() {
      $(".selectOptions .selectOption ul").append("<li id="+this.value+">"+this.text+"</li>");
  });

});

One thing I noticed is that in index.php, when it gets here:

$('.selectOptions .selectOption ul li').click(function(){ 
  alert();    

Do not enter the function , you can put a alert on the first line that does not alert. You can leave only alert within the function that nothing happens.

This is for both chrome and firefox browsers.

However, for the aa2.php file, the error only occurs for chrome .

But another thing I noticed is that , cursor: pointer is not working for the index.php page in the 2 browsers already on the aa2.php the cursor works.