Ajax is getting called only for first button - php

Question

<?php $count = 1; foreach ($settings[$slug] as $slug): ?>
<div data-toggle="buttons-radio" class="btn-group">
<button id="enable" value="1" class="btn btn-success active" type="button" name="includeicon"><i class="icon-ok icon-white"></i></button>
<button id="disable" value="0" class="btn" type="button" name="includeicon"><i class="icon-remove"></i></button>
</div>
<?phpendforeach?>
$(document).ready(function(){
$("#enable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/PluginConf/enable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
$("#disable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/PluginConf/disable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
});
I am passing button id in jquery, but ajax is getting called only for first button. For second and others it is not getting called, can anyone help me out in this?
Thanks

Answer 1

You have an id of enable and disable in a foreach. If the loop ever executes more than once you will then have multiple buttons with the same id. IDs have to be unique! Rather use something else to identify the click:
I suggest adding an enable class to the enable button and a disable class to the disable button, then catch the events like this:
$('.enable').click(function() {
// code in here
});
$('.disable').click(function() {
// code in here
});

Answer 2

Don't bind the click event(s) for multiple items by id! Ids have to be unique idetifiers.
<?php $count = 1; foreach ($settings[$slug] as $slug): ?>
<div data-toggle="buttons-radio" class="btn-group">
<button value="1" class="enable btn btn-success active" type="button" name="includeicon"><i class="icon-ok icon-white"></i></button>
<button value="0" class="btn disable" type="button" name="includeicon"><i class="icon-remove"></i></button>
</div>
<?phpendforeach?>
$(document).ready(function(){
$(".enable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/xervPluginConf/enable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
$(".disable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/xervPluginConf/disable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
});

Answer 3

You are using id what is not correct when several elements in your case buttons have the same id.When you use foreach loop you create multiple buttons with the same particular id. ID means that something is unique, and only one element can have that specyfic id. I assume you should make a class for this buttons and change your script code with having this in mind. Here what I suggest. Hope it helps.
<?php $count = 1; foreach ($settings[$slug] as $slug): ?>
<div data-toggle="buttons-radio" class="btn-group">
<button value="1" class="btn btn-success active enable" type="button" name="includeicon"><i class="icon-ok icon-white"></i></button>
<button value="0" class="btn disable" type="button" name="includeicon"><i class="icon-remove"></i></button>
</div>
<?php endforeach; ?>
$(document).ready(function(){
$(".enable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/xervPluginConf/enable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
$(".disable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/xervPluginConf/disable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
});