How to display multiple data ajax response in a modal

Question

For now, I can retrieve data from db using ajax and display it in a modal, but my problem is if it has multiple response, the previous one is replaced.

Modal

<div class="recipient_modal">
    <div class="apply_box">
        <div class="rec_close">
            <img src="../../assets/images/close.png" alt="close">
        </div>
        <div id="rec">  
            //display data here
        </div>
    </div>
</div>

ajax

$(document).on("click", "#viewList", function() {

    $.ajaxSetup({
        headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    var news = $(this).prop("value");
    $.ajax({
        type: "get",
        url : '{{url("admin/recipients")}}' + '/' + news,
        data: {newsID : news},
        success: function(store) {
            $.each(store, function(index, value){
                 $('#rec').text(value['name']);
            });
        },
        error: function() {
          $('.alert').html('Error occured. Please try again.');
        }
    });

});

How can I display all of them in a list form in my modal? This one keeps on replacing previous values, so instead of displaying 2 or more items, it always displays one.

Answer 1

When you execute this line:

$('#rec').text(value['name']);

it overwrites the data that you previously put into the div. Try using .append instead, which will add new values to the end of the div:

$('#rec').append(value['name'] + '<br>');