如何根据ajax数据创建html动态卡片

Question

我成功从ajax中检索数据，但是有一个问题是它还以json格式检索地址，所以我想在单独的单独卡片中显示所有地址。我已经显示了我想要的输出输出我得到了下面的代码我使用： -

HTML

<div class="card-container-clearfix">
 <div class="location-list">

 </div>
</div>

location-list

的CSS

.location-list{
    float: left;
    width:23%;
    border: 1px solid #ccc;
    background-color: #eee;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    height:200px;
}

Ajax成功响应

success: function(response){
      $('#name').html(response.response.total_record[0].first_name+" "+response.response.total_record[0].last_name);
      $('#first').val(response.response.total_record[0].first_name);
      $('#last').val(response.response.total_record[0].last_name);
      $('#phone').val(response.response.total_record[0].phone_number);
      $('#alternative').val(response.response.total_record[0].alternative_number);
      $('#id').val(response.response.total_record[0]._id);
      $.each(response.response.total_record[0].address,function(i,item){
            $('.location-list').append('<header class="header_title"><h3>Location:</h3></header><div class="location-detial"><p><span id='+response.response.total_record[0].address[i]._id+'>'+response.response.total_record[0].address[i].address+'</span></p></div>');
      });
}

所需的输出： -

我得到的输出： -

我将如何制作我想要的输出，任何人都可以帮助我。如果这是一个基本问题，那么抱歉因为我刚开始学习它。谢谢