Display only one div on hover

I'm doing a project using Wikipedia API where user can type some name in search and get results from Wikipedia. So i have most of the work but one issue got in my way. When i hover "each-list" div, "show-more" div is displayed from the right side of the parent div which is "each-list" div. Then i hover over "show-more" div which causes appearance of another div called "titleDesc". The problem is when i hover over "show-more" div all "titleDesc" divs displayed whereas i need only one related div to appear.

Javascript code

var apiKey = "*****";

var appendApiKeyHeader = function(xhr) {

  xhr.setRequestHeader('Api-Key', apiKey)

};



var name = "Eminem";

var searchRequest = {

  "phrase": name

}



$('#search').click(function() {



  var foundArticle = $("#query").val();



  console.log(foundArticle);



  var wikiUrl = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=' + foundArticle + '&format=json&callback=wikiCalback';



  // Clear content before AJAX call

  $(".list-container").html("");



  $.ajax({

      url: wikiUrl,

      dataType: "jsonp",

      success: function(response) {

          var artList = response[1];

          console.log(artList);

          for (var i = 0; i < artList.length; i++) {

            var title = artList[i];

            console.log("Number" + " " + i + " " + title);

            var titleDesc = response[2][i];

            console.log("Number" + " " + i + " " + titleDesc);

            var url = 'http://en.wikipedia.org/wiki/' + title;



            $(".list-container").append(

              '<span class = "each-list">' +

              '<a href="' + url + '" target="_blank" >' +

              title +

              '</a>' +

              '<div class="show-more">' +



              '<div id="show-more-inner">MORE</div>' +



              '</div>' +



              '</span>' +



              '<div class="titleDesc">' + '<p>' + titleDesc + '</p>' + '</div>'



            );



          } // end of "for" loop



          $('.show-more').hover(



            function() {

              $('.titleDesc').show();

            }



          );

        } // success function end



    }) // ajax function



  return false;



}); // click function



function GetSearchResults() {

  $.ajax({

    type: "GET",

    beforeSend: appendApiKeyHeader,

    url: "https://api.gettyimages.com/v3/search/images",

    data: searchRequest

  }).success(function(data, textStatus, jqXHR) {

    var uri = data.images[0].display_sizes[0].uri;

    $(".images").append('<img src = "' + uri + '" />');

    console.log(data);



  }).fail(function(data, err) {



    console.log(data);



  });

}



GetSearchResults();

This code is responsible for display of "titleDesc"

  $('.show-more').hover(



    function() {

      $('.titleDesc').show();

    }



  );

How to make only this div to display?

If you want more details about the project feel free to review it.