Getting Multiple Images From Ajax But Each Is Displaying After The Image Extension

I am passing multiple ids to fetch the image name but each image is displaying after the name of the image. please check below output. ]=$_POST['users']; $sql_compare='SELECT * FROM request WHERE Id IN (' .( is_array( $_SESSION['compare_user'] ) ? implode( ',', $_SESSION['compare_user'] ) : $_SESSION['compare_user'] ).')'; $compare_query=$conn->query($sql_compare); $compare_pic = array(); if ($compare_query->num_rows > 0) { while($userdata12=$compare_query->fetch_assoc()){ $compare_pic[]=$userdata12['profile_pic']; } } echo json_encode($compare_pic); exit();

then loop through the array in Javascript:

$(document).ready(function() {
  arr = [];
  $("[type=checkbox]").click(function() {
    if (this.checked) {
        arr.push($(this).val());
    } else { // Remove value if uncheckedvar index = arr.indexOf($(this).val());
        if (index != -1) {
            arr.splice(index, 1);
        }
    }
    $.ajax({
      type: "POST",
      url: "includes/compare_process.php",
      data: { users: arr },
      dataType: 'json',
      success: function(msg) {
        $("#pics_name").empty();
        $.each(msg, function() {
          $("#pics_name").append("<img src='images/profile/" + this + "' alt='' />");
        });
      },
      error: function() {
        alert("failure");
      }
    });
  });
});

Solution 2:

1. You could loop over what checkboxes are checked with $('input[type=checkbox]:checked') Loop over those, and send that to the PHP script.

2. You could do it per checkbox, and 'append' it with JS to some element. So instead of the .html(<img>).append(<img>) in the success statement of the ajax call.