How can I get the dynamic value to my id variable in javascript?

I have been trying to get the different values in my id variable in javascript so that I can fetch the data according to the id I hover.

I have following code inside the <script></script>

$(document).ready(function() {
          $('.stambha-img').hide();
            $(".stambha-cat").hover(function() {
            var id = document.getElementsByClassName("stambha-cat")[0].getAttribute("value");
                $.ajax({
            url: '/ajaxCat.php',
            type: 'POST',
            data: {
            id: id
            },
            success: function(response){
            if (typeof(response) != 'object') {
              response = $.parseJSON(response);
            }
            if (response.status.status == true) {
              var html_option = ""
              $.each(response.body, function(key, value) {
                var newsImage = "";
                if(value.image === ""){
                    newsImage = "<?php echo FRONT_IMAGES_URL.'shikshak.jpg' ?>";

                } else {
                    newsImage = value.image;
                }
                html_option += "<div class='col-md-3'><div class='stambha-img'><img class='img-responsive' src='" + newsImage + "'></div></div>";
              });
              html_option += "<div>";
              $('#catAjax').html(html_option);
            } else if(response.status.status == false){
                var amount_np = 'hello';
                $('#catAjax').html('<div class="container text-center" id="c404"><div class="row"><div class="col-md-6 col-sm-12 offset-md-3 c404"><h5 style="color:#DB4729"><strong>माफ गर्नुहोस्! यस कोटीमा कुनै समाचार छैन।</strong></h5></div></div></div>');
            }
            }
            });
              $('.stambha-img').show(); 
            }),

        $(".stambha-cat").mouseenter(function() {
               $(".stambha-img").show();
            });
          $(".stambha-cat").mouseleave(function() {
            $(".stambha-img").hide();
            id = "";
          });
        });

I want to erase the value of id when the mouseleave event occur so that when I hover to the next item I can get the id of other category.

And, I have the following code inside the list:

<li class="stambha-cat" value="<?php echo $necessary->id ?>"><a class="boldtitle" href="http://<?php echo $necessary->url ?>" target="_blank"><strong><?php echo $necessary->title ?></strong></a></li>

Update: When I hover over another category, I get the same category id. Is that because var id = document.getElementsByClassName("stambha-cat")[0].getAttribute("value"); giving the value of first category inside the class "stambha-cat"?

Replacing var id = document.getElementsByClassName("stambha-cat")[0].getAttribute("value"); with var id = $(this).attr('value'); worked for me. See the full code below:

$(document).ready(function() {
  $('.stambha-img').hide();
    $(".stambha-cat").hover(function() {
    var id = document.getElementsByClassName("stambha-cat")[0].getAttribute("value");
        $.ajax({
    url: '/ajaxCat.php',
    type: 'POST',
    data: {
    id: id
    },
    success: function(response){
    if (typeof(response) != 'object') {
      response = $.parseJSON(response);
    }
    if (response.status.status == true) {
      var html_option = ""
      $.each(response.body, function(key, value) {
        var newsImage = "";
        if(value.image === ""){
            newsImage = "<?php echo FRONT_IMAGES_URL.'shikshak.jpg' ?>";

        } else {
            newsImage = value.image;
        }
        html_option += "<div class='col-md-3'><div class='stambha-img'><img class='img-responsive' src='" + newsImage + "'></div></div>";
      });
      html_option += "<div>";
      $('#catAjax').html(html_option);
    } else if(response.status.status == false){
        var amount_np = 'hello';
        $('#catAjax').html('<div class="container text-center" id="c404"><div class="row"><div class="col-md-6 col-sm-12 offset-md-3 c404"><h5 style="color:#DB4729"><strong>माफ गर्नुहोस्! यस कोटीमा कुनै समाचार छैन।</strong></h5></div></div></div>');
    }
    }
    });
      $('.stambha-img').show(); 
    }),

$(".stambha-cat").mouseenter(function() {
       $(".stambha-img").show();
    });
  $(".stambha-cat").mouseleave(function() {
    $(".stambha-img").hide();
    id = "";
  });
});