I’m using ajax to pass some data from an advanced custom field wysiwyg editor. In the markup I added, it is the div with class ‘bio’ I’m referring to. The problem is that when I get the data back it’s all in one big paragraph, rather than broken up into multiple like it is in the wysiwyg. I’m guessing this is because it’s sending json instead of markup??? When I log the data being passed in the console, I can see it is separated into paragraphs. Is there a way I can render this out in separate p tags, or is there a way JS can detect the end of a paragraph and I can append a
or something?

Here is my php file

<div id="<?php echo $post->ID; ?>" class="team-section__member" data-ajax-url="<?php echo admin_url("admin-ajax.php"); ?>">
    <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
    <div class="info">
        <?php
        $s = get_the_title();
        $name = explode(' ', trim($s));
        ?>
        <h4 class="name"><?php echo get_the_title(); ?></h4>
        <h6 class="title"><?php echo get_field('team_member_title'); ?></h6>
        <a class="phone" href="tel:<?php echo get_field('team_member_phone_number'); ?>"><?php echo get_field('team_member_phone_number'); ?></a>
        <a class="email" data-email="<?php echo get_field('team_member_email'); ?>" href="mailto:<?php echo get_field('team_member_email'); ?>">Email <?php echo $name[0] . "\n"; ?></a>
        <div class="bio"><?php echo get_field('team_member_bio'); ?></div>
    </div>
</div>   

   // Member Bio modal w/ajax
        $(".team-section__member .button").click(function () {
            let member = $(this).parent().parent();
            let memberId = member.attr('id');
            let ajaxUrl = member.data('ajaxUrl');
            let name = member.children('.info').find('.name').text();
            let image = member.children('img').attr('src');
            let title = member.children('.info').find('.title').text();
            let email = member.children('.info').find('.email').data('email');
            let phone = member.children('.info').find('.phone').text();
            let bio = member.children('.info').find('.bio').text();
            $("body").toggleClass("scroll-lock");
            console.log(bio);
            $.ajax({
                type: "POST",
                url: ajaxUrl,
                dataType: 'json',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                },
                data: {
                    action: 'post_member_id',
                    id: memberId,
                    image: image,
                    name: name,
                    title: title,
                    email: email,
                    phone: phone,
                    bio: bio,
                },
                success:
                    function (data) {
                        $(".team-modal__content").empty();
                        $(".team-modal__content").append(

                            "<div class='team-modal__container'>" +
                            "<button class='modal-button'><span></span><span></span></button>" +

                            "<div class='team-modal__image-wrapper'>" +
                            "<img class='team-modal__image' src=" + image + ">" +
                            "</div>" +

                            "<div class='team-modal__info-wrapper'>" +
                            "<h3 class='team-modal__name'>" + name + "</h3>" +
                            "<h5 class='team-modal__title'>" + title + "</h1>" +
                            "<a class='team-modal__email' href=mailto:" + email + ">" + email + "</a>" +
                            "<a class='team-modal__phone' href=tel:" + phone + ">" + phone + "</a>" +
                            "<div class='team-modal__bio'>" +
                            bio +
                            "</div>" +

                            "</div>" +
                            "</div>"
                        );
                    },
                error: function (error) { console.log(error) },
            });

>Solution :

Show the content in a <pre> element or set the CSS property white-space: pre-wrap on your container, so that whitespace is displayed normally.

.team-modal__bio {
    white-space: pre-wrap;
}