How to parse AJAX array into specific HTML div classes?

I currently have a working AJAX request that sends a request to my PHP file and echos the result to the HTML. I am able to create an alert that shows the array of data. How do I parse the data and insert each one specifically into the div classes? I know you might be thinking "just use a table or a list" My actual code is much more structured, the data must be inserted into the specific divs.

Script

    $(function(){
        $(".task-listing").click(function() {
        $.ajax({
            type: 'POST',
            url: 'php/task-info-get.php',
            dataType: 'json',
            data: 'pid=' + $(this).attr("id"),
            success: function (response) {
                 alert(response);
            }
        })
    });
    });

HTML div I want Data in

<div class="data">
  <div class="task_date"></div>
  <div class="title"></div>
  <div class="description"></div>
  <div class="location"></div>
  <div class="startdate"></div>
  <div class="tasktime"></div>
  <div class="price"></div>
</div>

PHP

<?php
include 'sqlconnection.php';
$conn = OpenCon();

$stmt = $conn->prepare('SELECT task_date,title,description,location,price,startdate,tasktime FROM tasks WHERE pid='.$_POST['pid']);
$stmt->execute();
$stmt->bind_result($task_date,$title,$description,$location,$price,$startdate,$tasktime);
while($stmt->fetch()) {
    $output[]=array($task_date,$title,$description,$location,$price,$startdate,$tasktime);
}
$json=json_encode($output);

echo $json;
$stmt->close();
CloseCon($conn);
?>