Modal not getting refresh with new data
<p>I have a page where all data is loaded dynamically from a database and displayed in divs. On every div there is button named <code>View</code>. On click of this button I call a method: <code>onclick="getdetails(this)"</code>. This method creates a modal dynamically with data and it is working completely fine.</p>

<pre><code>function getdetails(par) {
    var modaldiv = '';
    var maincontent = '';
    var htourid = document.getElementById("htourid" + par.id).value;
    var hadultprice = document.getElementById("hadultprice" + par.id).value;
    var hchildprice = document.getElementById("hchildprice" + par.id).value;
    var hdescription = document.getElementById("hdescription" + par.id).value;
    var htourname = document.getElementById("htourname" + par.id).value;

    $.ajax({
        type: "GET",
        url: "xxxxxxxxxxxx" + htourid,
        dataType: "json",
        contentType: "application/json",
        success: function(data) {
            var rowcount = 1;
            for (var i = 0; i &lt; data.GetToursDetailsimagesResult.TourImages.length; i++) {
                if (rowcount == 1) {
                    maincontent += '&lt;div class="item active"&gt;' +
                        '&lt;img src="' + data.GetToursDetailsimagesResult.TourImages[i].ImagePath + '" alt=""/&gt;' +
                        '&lt;/div&gt;';
                } else {
                    maincontent += '&lt;div class="item"&gt;' +
                        '&lt;img src="' + data.GetToursDetailsimagesResult.TourImages[i].ImagePath + '" alt=""/&gt;' +
                        '&lt;/div&gt;';
                }
                rowcount++;
            }
            modaldiv = '&lt;div id="modal-package" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"&gt;' +
                '&lt;div class="modal-dialog modal-lg"&gt;' +
                '&lt;div class="modal-content"&gt;' +
                '&lt;div class="modal-header"&gt;' +
                '&lt;a  class="close" href = "Tours_and_Activities.aspx" aria-hidden="true"&gt;&amp;times;&lt;/a&gt;' +
                '&lt;ul class="nav nav-tabs" data-toggle="tabs"&gt;' +
                '&lt;li class="active"&gt;&lt;a href="#modal-tabs-package"&gt;&lt;i class="gi gi-package"&gt;&lt;/i&gt;Details&lt;/a&gt;&lt;/li&gt;' +
                '&lt;/ul&gt;' +
                '&lt;/div&gt;' +
                '&lt;div class="modal-body"&gt;' +
                '&lt;div class="tab-content"&gt;' +
                '&lt;div class="tab-pane active" id="modal-tabs-package"&gt;' +
                '&lt;h1 class="h2"&gt;&lt;strong style="margin-left: 16px;"&gt;' +
                '&lt;asp:Label ID="lbl_tourdetails_tour_name" Text="' + htourname + '" runat="server"&gt;&lt;/asp:Label&gt;&lt;/strong&gt;&lt;/h1&gt;' +
                '&lt;input type="hidden" id="htourid" value="' + htourid + '" /&gt;' +
                '&lt;div class="col-lg-7"&gt;' +
                '&lt;div id="project-carousel" class="carousel slide" data-ride="carousel" data-interval="2000"&gt;' +
                '&lt;div id="divimages" class="carousel-inner text-center"&gt;' +
                maincontent +
                '&lt;/div&gt;' +
                '&lt;a class="left carousel-control" href="#project-carousel" data-slide="prev"&gt;' +
                '&lt;span&gt;' +
                '&lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;' +
                '&lt;/span&gt;' +
                '&lt;/a&gt;' +
                '&lt;a class="right carousel-control" href="#project-carousel" data-slide="next"&gt;' +
                '&lt;span&gt;' +
                '&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;' +
                '&lt;/span&gt;' +
                '&lt;/a&gt;' +
                '&lt;/div&gt;' +
                '&lt;/div&gt;' +
                '&lt;asp:Label ID="lbldescription" Text="' + hdescription + '" runat="server"&gt;&lt;/asp:Label&gt;' +
                '&lt;/div&gt;' +
                '&lt;/div&gt;' +
                '&lt;/div&gt;' +
                '&lt;div class="modal-footer"&gt;' +
                '&lt;h4 class="pull-left"&gt;&lt;span class="text-muted"&gt;&lt;b&gt;Adult Price: &lt;/b&gt;&lt;/span&gt;&lt;strong class="text-primary"&gt;' +
                '&lt;asp:Label ID="lbl_viewadultprice" Text="' + hadultprice + '" runat="server"&gt;&lt;/asp:Label&gt;&lt;/strong&gt;/&lt;/h4&gt;' +
                '&lt;h4 class="pull-left"&gt;&lt;span class="text-muted"&gt;&lt;b&gt;Child Price: &lt;/b&gt;&lt;/span&gt;&lt;strong class="text-primary"&gt;' +
                '&lt;asp:Label ID="lbl_viewchildprice" Text="' + hchildprice + '" runat="server"&gt;&lt;/asp:Label&gt;&lt;/strong&gt;&lt;/h4&gt;' +
                '&lt;br /&gt;' +
                '&lt;br /&gt;' +
                '&lt;button type="button" class="btn btn-effect-ripple btn-success" onclick="Open_Addtocart_view(this)" style="background-color: #7DC402;"&gt;&lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt;Add to Cart&lt;/button&gt;' +
                '&lt;a  class="btn btn-effect-ripple btn-danger" style="background-color: #C43902;" data-dismiss="modal"&gt;Close&lt;/a&gt;' +
                '&lt;/div&gt;' +
                '&lt;/div&gt;' +
                '&lt;/div&gt;' +
                '&lt;/div&gt;';
            $("#modaldiv").append(modaldiv);
            $('#modal-package').modal('show');
        }
    });
}
</code></pre>

<p>The problem is once I click on any divs 'View' button for the first time it goes on displaying the same data in modal even after I click any other view details button. If I refresh the page it displays new data, but then again the same issue goes on.</p>

<p>Can anyone help me find out what the problem is and how to solve it?</p>