how to increment product quantity with jquery append function

Question

let qnty = 1;

// adding quantity
function addQuantity(id) {
  qnty++;
  $(`#product${id}p`).html(qnty)
  console.log('add', id)
}

// remove quantity
function removeQuantity(id) {
  qnty--;
  $(`#product${id}.value`).html(qnty)
  console.log('remove', id)
}

//fetching data from api
function getProductsByWholeSellerId(id) {
  $.get('https://netco-indo-test.nfrnds.net:20003/fmcg-dd/catlog?whsId=' + `${id}`, (response, status) => {
    let productArray = response.products
    let categoryArray = response.categories;
    let categoryName1 = "";

    function getCategoryById(response, id) {
      let data = response.filter(
        category => category.productCategoryId === id
      )
      return data[0].categoryName
    }
    productArray.forEach(product => {
      // console.log(product)
      let brandName = product.brandName;
      let productName = product.productName;
      let categoryid = product.categoryId;
      let categoryName = getCategoryById(categoryArray, categoryid)
      let productId = product.productId
      let quantity = 1
      let image = `https://res.cloudinary.com/nfrnds/image/upload/fmcgdd` + product.smallImgUrl;
      let object = {
        productName: productName,
        productId: productId,
        quantity: 1,
        categoryName: categoryName,
        categoryId: categoryid,
        productImg: image,
        price: 0
      }

      // console.log(object)
      if (product.smallImgUrl !== null && product.smallImgUrl !== "") {

        //Using productTag variable that contains html content for creating product card 
        let productTag =`
<div class="product-container">
  <div class="product-card">
    <div class="product-image"><img src="${image}"></div>
    <div class="content">
      <div class="name"><h3>${productName}</h3></div>
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. </div>
      <div class="price">Price: <b>100<b> $</div>
      <div class="quatity">
        <div id="product${productId}" onclick="removeQuantity(this.id)" class="plus">-</div>
        <div id="product${productId}p" class="value">1</div>
        <div id="product${productId}" onclick="addQuantity(this.id)" class="minus">+</div>
      </div>
    </div>
    <button>Add To Cart</button>
  </div>
</div>`;
        $('ul').append(productTag)
      }
    })
  })
}

getProductsByWholeSellerId(30972)
// the "quatity" class contains elements to increase and decrease product quantity by calling a function ,the function is called not changing the value of the quantity

Answer 1

You can pass this inside your function where this refer to current div which is clicked then use $(el).siblings(".value").html() to get value of .value div near your div which is been clicked then either add 1 or subtract 1 from total then assign new values to your div using .html()

Demo Code :

//just for demo...supoose data look like this :)
var response = {
  "products": [{
    "brandName": "A",
    "productName": "Somethings",
    "categoryId": "1",
    "productId": "1",
    "smallImgUrl": "something.png"
  }, {
    "brandName": "B",
    "productName": "2 Somethings",
    "categoryId": "2",
    "productId": "2",
    "smallImgUrl": "something.png"
  }]
}

function addQuantity(el) {
//get value  div and change value there
$(el).siblings(".value").html(parseInt($(el).siblings(".value").html()) + 1)
}

function removeQuantity(el) {
//get value  div and change value there
$(el).siblings(".value").html(parseInt($(el).siblings(".value").html()) - 1)

}
function getProductsByWholeSellerId(id) {

  /*  $.get('https://netco-indo-test.nfrnds.net:20003/fmcg-dd/catlog?whsId=' + `${id}`, (response, status) => {

      let categoryArray = response.categories;
      let categoryName1 = "";


      function getCategoryById(response, id) {


        let data = response.filter(

          category => category.productCategoryId === id

        )

        return data[0].categoryName
      }*/

  let productArray = response.products
  productArray.forEach(product => {

    // console.log(product)

    let brandName = product.brandName;
    let productName = product.productName;
    let categoryid = product.categoryId;
    let categoryName = "somehtings " /*getCategoryById(categoryArray, categoryid)*/
    let productId = product.productId
    let quantity = 1
    let image = `https://res.cloudinary.com/nfrnds/image/upload/fmcgdd` + product.smallImgUrl;


    let object = {
      productName: productName,
      productId: productId,
      quantity: 1,
      categoryName: categoryName,
      categoryId: categoryid,
      productImg: image,
      price: 0
    }
    if (product.smallImgUrl !== null && product.smallImgUrl !== "") {
    //pass `this` inside function..where its refer to div which is clicked
      let productTag =

        `<div class="product-container">
                    <div class="product-card">

                        <div class="product-image"><img src="${image}"></div>

                        <div class="content">
                            <div class="name"><h3>${productName}</h3></div>
                            <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. </div>
                            <div class="price">Price: <b>100<b> $</div>

                            <div class="quatity">
                                <div id="product${productId}" onclick="removeQuantity(this)" class="plus">-</div>
                                <div id="product${productId}p" class="value">1</div>
                                <div id="product${productId}" onclick="addQuantity(this)" class="minus">+</div>
                            </div>
                        </div>
                        <button>Add To Cart</button>
                    </div>
                </div>`


      $('ul').append(productTag)
    }

  })

  /*})*/

}

getProductsByWholeSellerId(30972)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
</ul>