Custom dropdown isn't working as expected

Question

I wrote a custom drop down for a phone-gap project. It has 3 entries: Enterprices Routing & Switches, Junos Security and Service Provider Routing and Switching. Whenever I select any one of 3 entries, it gets selected successfully, however It shows selected entry twice. I want selected entry to be shown only once. My JavaScript code is:

$(".current_track").click(function() {
  if ($('.track').is(':visible')) {
    $(".track").hide();
    $(".trackIcon").removeClass("trackOpenIcon").addClass("trackCloseIcon");
    if ($('.trackName').text() != "Select Track") {
      $(".category").show();
      $('.lock_hide').show();
      $('#TrackBuy').show();
    }
  } else {
    $(".category").hide();
    $('.lock_hide').show();
    $('#TrackBuy').hide();
    $(".track").show();
    $('.lock_hide').show();
    $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
  }
});
$('.trackDiv').on("click", ".track", function() {
  $('.trackName').text($(this).text());
  $('.trackName').attr("id", $(this).attr("id"));
  $(".track").hide();
  $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
  $('.lock_hide').show();
  // saving user selected/clicked trackid and track name to local stroage
  localStorage.setItem("mainTrackid", $(this).attr("id"));
  localStorage.setItem("mainTrackname", $(this).text());
  localStorage.setItem("selectedTrackPayStatus", $(this).attr("payStatus"));
  localStorage.removeItem("selectedTrackPrice");
  // check first paper exist or not if exist means load exams list

  checkTrackpapersExist();

});  

Entire code example.

Answer 1

Updated fiddle.

You could use an extra class selected to do the trick.

Remove selected class from all the track's and add it to the clicked one :

$('.trackDiv').on("click", ".track", function() {
  $('.track').removeClass('selected');
  $(this).addClass('selected');

  $('.trackName').html($(this).html()); //Use '.html()' to show the icon
  ....
});

Hide the selected track from the dropdown :

$(".current_track").click(function() {
  .....

  $('.track.selected').hide();
});

Hope this helps.

$(".current_track").click(function() {

  if ($('.track').is(':visible')) {
    $(".track").hide();
    $(".trackIcon").removeClass("trackOpenIcon").addClass("trackCloseIcon");
    if ($('.trackName').text() != "Select Track") {
      $(".category").show();
      $('.lock_hide').show();
      $('#TrackBuy').show();
    }
  } else {
    $(".category").hide();
    $('.lock_hide').show();
    $('#TrackBuy').hide();
    $(".track").show();
    $('.lock_hide').show();
    $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
  }

  $('.track.selected').hide();
});
$('.trackDiv').on("click", ".track", function() {
  $('.track').removeClass('selected');
  $(this).addClass('selected');

  $('.trackName').html($(this).html());
  $('.trackName').attr("id", $(this).attr("id"));
  $(".track").hide();
  $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
  $('.lock_hide').show();
});

.trackDiv > .track > .fa-lock {
  margin-top: 3px;
}

.fa-lock {
  color: #fff;
  font-size: 23px;
}

.lock_category {
  padding-right: 0px;
  padding-top: 3px;
}

.lock_hide {
  display: none;
}

.fa-unlock {
  color: #fff;
  font-size: 17px;
}

.trackDiv {
  background-color: #374550;
  border-radius: 4px;
  height: 40%;
  margin: 2% 0 0;
  padding: 3% 2.7% 2.9%;
  width: 100%;
}

.trackName {
  color: #fff;
  font-family: "robotRegular";
  font-size: 16px;
  font-weight: 500;
}

.trackOpenIcon {
  background-image: url("../JunosImages/mob/down-arrow_normal1.png");
  background-image: url("../JunosImages/mob/front-arrow_normal_tab.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: block;
  height: 11px;
  margin-top: 1.5%;
  width: 19px;
}

.trackCloseIcon {
  background-image: url("../JunosImages/mob/front-arrow_normal_tab.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: block;
  height: 18px;
  margin-top: 0.7%;
  width: 12px;
}

.track {
  color: #fff;
  display: block;
  font-family: "robotRegular";
  font-size: 16px;
  font-weight: 500;
  padding: 5% 0 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="categorylist">
  <div class="trackDiv">
    <div class="current_track">
      <span class="trackName">Select Track</span>
      <span class="trackIcon trackOpenIcon pull-right"></span>
      <div><span class="label label-primary Buy" id="TrackBuy" style="display:none">Buy $24</span></div>
    </div>
    <span id="t1" class="track">Enterprices Routing & Switches <span class="fa fa-lock pull-left"></span></span>
    <span id="t2" class="track">Junos Security</span>
    <!-- <span id="t3" class="track">Data Center Design</span> -->
    <span id="t4" class="track">  Service Provider Routing and Switching</span>
  </div>
  <div class="category">
    <span class="ctgryName">JNCIs - SEC</span>
    <span class="ctgryIcon pull-right"></span>
  </div>
  <div class="category">
    <span class="ctgryName">JNCIS - ENT</span>
    <span class="ctgryIcon pull-right"></span>
  </div>
  <div class="category">
    <span class="ctgryName">JNCIS - ENT</span>
    <span class="ctgryIcon pull-right"></span>
  </div>
  <div class="category">
    <span class="ctgryName" id="ctgryName">JNCIA - Junos</span>
    <span class="ctgryIcon pull-right"></span>
  </div>
</div>