Need help replacing divs in Bootstrap popover on click with jQuery

Hi TH friends,

First time posting hope you can help...

I have a div that is populated within a bootstrap popover that is triggered via hover. The content displays great but what I now want to do is to be able to click element inside of this instance and replace the entire contents of the popover.

The behavior I want to happen is such:

1. hover button
2. display div with inner divs
3. click on inner div
4. replace entire div within popover with new div and inner divs

I can get the first content to happen but can't get the outer div to replace as is desired. What happens is that just the inner div is replaced. Here is what I have thus far.

The div/button

 <div class="pop m-l-10 btn-xs bgm-lightgreen" data-toggle="popover" data-placement="left">
      <i class="zmdi zmdi-plus"></i>
 </div>

The divs

<div id="categories"> <div class="listview lv-bordered lv-lg"> <div class="lv-header-alt"> <!-- <div class="pull-right"><a type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></a></div> --> <h2 class="lvh-label">Select a category</h2> </div> <div class="lv-body"> <c:forEach var="variable" items="${categories}"> <div class="lv-item media"> <div class="checkbox pull-left"> <i class="zmdi zmdi-plus"></i> </div> <div class="media-body"> <div class="lv-title" value="${categories.key}"> ${categories.value} </div> </div> </div> /c:forEach </div> </div> </div>

<div id="subcategories"> <div class="listview lv-bordered lv-lg"> <div class="lv-header-alt"> <!-- <div class="pull-right"><a type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></a></div> --> <h2 class="lvh-label">Select a subcategory</h2> </div> <div class="lv-body"> <c:forEach var="variable" items="${subcategory}"> <div class="lv-item media"> <div class="checkbox pull-left"> <i class="zmdi zmdi-plus"></i> </div> <div class="media-body"> <div class="lv-title" value="${subcategory.key}"> ${subcategory.value} </div> </div> </div> /c:forEach </div> </div> </div>

Script

    $('.pop').each(function () {
        var $elem = $(this);

        $elem.popover({
            html: true,
            trigger: 'hover',
            container: $elem,
            content: function() {
                return $('#variables').html();
            }

        })
        // show category content on click of lv-item
        $(this).on('shown.bs.popover', function () {
            $('.lv-item').click(function (event) {
                $('#categories').html($(this).replaceWith($('#subcategories').html()));
                event.preventDefault();
            });
            // console.log('lv-item clicked');
        })
    });