Why is my jQuery Ajax json array data getting repeated?

Question

Not sure why this is happening maybe I put codes inside one another - or maybe totally different issue. Looking for expertise in this situation. I am trying a basic example, where select data is populated from the database:

      <div class="col-md-4 mb-3">
        <label for="producer">Select Producers</label>
        <?php if ($data): ?>
        <select class="custom-select d-block w-100" name="producer[]" id="producer" required="" size="5" multiple>
            <?php foreach($data as $row): ?>
                <option value=<?php echo $row['Id'] ?> ><?= $row['producer_name'] ?></option>
            <?php endforeach ?>
        </select>
        <?php else: ?>
            No data found
        <?php endif ?>
        <button class="btn btn-danger btn-sm" type="submit" id="del_producer">Delete</button>
        <div id="asd"></div>
      </div>

There is a button which will send the multiple selected data to another php page through ajax. Here is the code.

$('#producer').on('click', function(event){
var prodId=' ';
prodId = $(this).val();
var jsonString = JSON.stringify(prodId);
document.getElementById("asd").innerHTML = jsonString;
if (prodId!=""){
  $("#del_producer").click(function(){
    $("#del_producer").attr("disabled", "disabled");
    $.ajax({
            url: "delete.php",
            type: "POST",
            data: {data : jsonString},
            cache: false,
            success: function(result){
                $("#del_producer").removeAttr("disabled");
                prodId = '';
                alert(result);
                console.log(result);
            }
        });
  });
}
    else{
        alert('Please select producer to delete!');
    }
});

#asd is just checking if the values selected are correct before sending. And yes it is correct. Now my php file looks like this:

    $data = json_decode(stripslashes($_POST['data']));
    $array = implode(',', $data);
    echo $array;

Yes just three lines to get return what I sent. Now to the problem: I am sending 3 id values [2,3,5] it is shown such in #asd as well. Now when I click the button - the response I am receiving is [2] , [2,3] , [2,3,5] - three responses. It should be something I am missing. Can someone please point it out. I need it to be [2,3,5] as I am sending.

Answer 1

From the look of your jQuery code, my guess is that this code:

$("#del_producer").click(function(){

...could be piling up multiple click listeners on del_producer . You need to make that the latest listener function that you add is the only click listener.

The same could be true for $('#producer').on('click', function(event){ , but I'd have to see more of the context of the code to know if the same problem might exist there as well. The important thing to remember is that whenever you do .on('some-event', my_function... than doesn't replace any existing listener functions for that event type, it just adds new ones.