how to dynamically add collapsible set with json return data?

how to dynamically add collapsible set with json return data?

Hi, 

I'm trying to add collapsible set with json return data, but for whatever reason the result is look like this.
Please give me some advise on how to fix it~~

Thanks 
Kevin

    Here is my code
    1.  <div data-role="content" align="center">
    3.   <label for="search-basic">Search Input:</label>
    4. <input type="search" name="search" placeholder="Book Title, Author, or ISBN#" id="searchkeyword" value="" />
    5.     <input type="button" id="search" value="Search" />
    6.     <div data-role="collapsible-set" id="result"></div>
    7.     <div id=""><b>price may change...</b></div> 
    8.   </div> 
    9. <script>
    10. $(document).ready(function(e) 
    11. {
    12. $("#search").click(function(e) 
    13. {
    14. if ($("#searchkeyword").val() != "")
    15. {
    16. $("#result").empty();
    17. $.getJSON("query.php?action=buyback&keyword=" +$("#searchkeyword").val(), function(data) 
    18. {
    19. if (data.length > 0)
    20. {
    21. for (var x = 0; x < data.length; x++) 
    22. {  
    23. var content = '<div data-role="collapsible" data-collapsed="true" class="ui-collapsible-contain"><h3>' + data[x].TITLE + '</h3><p>Author: ' + data[x].AUTHOR + '<br>ISBN:' + data[x].ISBN + '<br>Price: $' + data[x].PRICE + '</p></div>';
    24. $("#result").append(content).trigger('create');
    25. }
    26. $("#searchkeyword").val("");
    27. }
    28.     });
    29. }
    30.     });

    32. });