Ampersands string name is not working in javascript and aspx page

Here I have an automatically generates HTML code .when clicking the tab I want to go to the tab details .but my tab is using dynamic append.in some of my columns name I use "&" like shirt&pants etc... when clicking the tab is not redirecting. here I use to append the items using category name. my aspx code is

  $(".CategoryMenu").find('ul').append('<li class="active"><a data-toggle="tab" href="#' + catgName + '">' + CategoryName + '</a></li>');

This is my HTML

               var catgName = "";
               var CategoryName = data[i].CategoryName;
               if (data[i].CategoryName != null) {         
              catgName = data[i].CategoryName.replace('/', '');
               catgName = catgName.replace('_', '');
              catgName = catgName.replace('\'', '');
              catgName = catgName.replace(/\s/g, '');
                    }

<ul id="myTab" class="nav nav-pills" style="margin:0px;">
  <li class="active"><a data-toggle="tab" 
    href="#Vegetable">Vegetable& Vegetable  // not redirecting here
       </a></li><li><a data-toggle="tab" href="#Fruits">Fruits</a></li></ul>