I created like a mini shop with 4 items and now I want to change the quantity of that items and be able to add them to a cart I created when I click button + to grab my item id but why is only grabbing me first id how can I get other items id by clicking it on same class for all of them here is the code
JavaScript
x
74
74
1
$(document).ready(function(){
2
// Creating ajax request to get all items from the server
3
$.ajax({
4
type: "POST",
5
url: "https://api.cleverchoice.cc/",
6
dataType: "json",
7
success: function(response){
8
var html = '';
9
response.forEach(function(data){
10
html += '<div class="col-sm-6 col-md-3 Single_Product" id="'+data["id"]+'">'+
11
'<div class="card mb-4 box-shadow">'+
12
'<img class="card-img-top" src="'+ data["image"] +'" data-holder-rendered="true">'+
13
'<div class="card-body">'+
14
'<p class="card-text cc-name">'+data["name"]+'</p>'+
15
'<div class="d-flex justify-content-between align-items-center">'+
16
'<div class="btn-group">'+
17
'<div class="Qty_Box">'+
18
'<span class="Qty_Minus">-</span>'+
19
'<input class="qty_value" type="text" value="1" name="qty">'+
20
'<span class="Qty_Plus">+</span>'+
21
'</div>'+
22
'<label for="cart_drawer_action" class="btn btn-sm btn-outline-secondary add_to_cart">Add to cart</label>'+
23
'</div>'+
24
'<small class="text-muted price">'+data["currency"]+data["price"]+'</small>'+
25
'</div>'+
26
'</div>'+
27
'</div>'+
28
'</div>';
29
});
30
31
$(".Product_List").append(html);
32
33
// Adding quantity
34
$(".Qty_Plus").click(function(){
35
var id = $(".Single_Product").attr("id");
36
37
console.log(id);
38
39
var i = $("#"+id+" .qty_value").val() * 1 + 1;
40
$("#"+id+" .qty_value").val(i);
41
});
42
// Decrise quantity
43
$(".Qty_Minus").click(function(){
44
var id = $(".Single_Product").attr("id");
45
46
if($(".qty_value").val() != 1){
47
var i = $("#"+id+" .qty_value").val() * 1 - 1;
48
$("#"+id+" .qty_value").val(i);
49
}
50
});
51
// Add to cart
52
$(".add_to_cart").click(function(){
53
var id = $(".Single_Product").attr("id");
54
console.log(id);
55
56
var image = $("#"+id+" .card-img-top").attr("src");
57
var name = $("#"+id+" .cc-name").html();
58
var qty = $("#"+id+" .qty_value").val();
59
var price = $("#"+id+" .price").html();
60
61
html = '<div class="Cart_Item">'+
62
'<div class="Cart_Img"><img src="'+ image +'" alt="product"/></div>'+
63
'<div class="Cart_Name"><p>'+ name +'</p></div>'+
64
'<div class="Cart_Price"><p>'+ qty +'</p></div>'+
65
'<div class="Cart_Price"><p>'+ price +'</p></div>'+
66
'<div class="Cart_Price"><p>'+ price +'</p></div>'+
67
'</div>';
68
69
$(".Cart_Items").append(html);
70
});
71
}
72
});
73
});
74
Advertisement
Answer
Using var id = $(".Single_Product").attr("id");
can only return one id from the matching selectors so it always returns the first one.
You can use siblings('.qty_value')
to target the associated input or closest('.Qty_Box').find('.qty_value')
Something like:
JavaScript
1
5
1
$(".Qty_Plus").click(function(){
2
var $input = $(this).siblings('.qty_value')
3
$input.val( +$input.val() +1)
4
});
5