显示带有db元素的表

I tried to display the details from database into table but it duplicates table every row from database. I think the problem is with append command but I dont know how to solve it.

$(document).ready(function() {
  listShopPage();
});

// Gets the listPage template, puts it in document, then fills it with  shop

function listShopPage() {
  $.ajax({
    url: "templates/shopList.html",
    type: "GET"
  }).done(function(html) {
    fillShopWithData(html);
  }).fail(function(xhr, status, errorThrown) {
    console.log("Error: Unable to load shopList");
  });
}

// request to get all lists
function fillShopWithData(template) {
  $.ajax({
    url: "api/taskShop/",
    type: "GET",
    dataType: "json"
  }).done(function(json) {
    var data = json["data"];
    var listShop = $("#listName");
    listShop.html("");
    for (var i = 0; i < data.length; i++) { //for each task
      var list_shop = data[i];
      var tmp = $(template); //fill shop template with data from database
      tmp.attr("name", "listshop_" + list_shop["itemName"]);
      tmp.find(".id").text(list_shop["id"]);
      tmp.find(".name").text(list_shop["itemName"]);
      tmp.find(".description").text(list_shop["description"]);
      tmp.find(".amount").text(list_shop["amount"]);
      tmp.find(".price").text(list_shop["price"]);
      listShop.append(tmp);
    }
  }).fail(function(xhr, status, errorThrown) {
    console.log("Error: Unable to load shop list");
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
index.html

<body>
  <div id="listName"></div>
</body>


shopList.html
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>id</th>
        <th>Item</th>
        <th>description</th>
        <th>amount</th>
        <th>price</th>
      </tr>
    </thead>
    <tbody id="listName">
      <tr class="success">
        <tb class="id"></tb>
        <tb class="name"></tb>
        <tb class="description"></tb>
        <tb class="amount"></tb>
        <tb class="price"></tb>
      </tr>
      <tr class="danger">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="info">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

</div>