Problem with dynamically appended elements

Problem with dynamically appended elements

I am creating something like a shopping-cart in yii2 .
Here is my code:
  1. $('body').on('click', '#materials li', function () {
  2. let hidden = $('[value=' + $(this).attr('data-id') + ']');
  3. console.log(hidden);
  4. if (hidden.length > 0) {
  5. return false;
  6. }
  7. else {
  8. $('#materials-form').append('<input type="hidden" name ="Materials[' + $(this).attr('data-id') + ']" class="hiddenInput" value="' + $(this).attr('data-supplier') + '"/>');
  9. $('#materials-form').append('<li>' + $(this).text() + '<button data-id = "' + $(this).attr('data-id') + '">Delete</button>' + '<input type ="text" id = "quantity" name="quantity[' + $(this).attr('data-id') + ']" /> ' + '<input type ="hidden" id="price" name="price[' + $(this).attr('data-id') + ']" value ="' + $(this).attr('data-price') + '"' + '</li>');

  11. $("#quantity").keyup(function () {
  12. var sVal = this.value;
  13. var iNum = parseInt(sVal);
  14. var price = $("#price").val();
  15. //var price_num = parseInt(price);
  16. //alert(price);
  17. var total = iNum * price;
  18. $('#materials-form').append('<li>' + total + '</li>');
  19. alert((total));
  20. });}

And I try to check, whether a li is clicked in order not to be appended 2 times. So I declared a let value named hidden and I pass in there the value , or better the id value.
The question is that , the length of that let var , does not increase or it remains always the same. It has a different behavior for different database records.I want the length of that value to increase by click in order not to append it again or if it is not clicked to append?


Here is the rest of the code:
  1. public
  2. function actionGetOrderMaterialsById()
  3. {
  4. \Yii::$app->response->format = 'json';
  5. $supplier_clicked = Yii::$app->request->get("supplier");
  6. $result = (new Query())
  7. ->select('materials.id,materials.name as material,material_supplier.materials_id,material_supplier.price,supplier.name,supplier.id as supplier_id')
  8. ->from('materials')
  9. ->innerJoin('material_supplier', 'materials.id = material_supplier.materials_id')
  10. ->innerJoin('supplier', 'supplier.id = material_supplier.supplier_id')
  11. ->where(['supplier_id'=> $supplier_clicked])
  12. ->all();

  14. //die(var_dump($result));
  15. $options = '';
  16. foreach ($result as $material) {

  18. $options .= '<li id ="li-value" data-supplier = "' . $material['supplier_id'] . '" data-id = "' . $material['id'] . '"data-price = "' . $material['price'] . '" >' . $material['material'] . ' from supplier->
  19. ' . $material['name'] . ' and it costs' . $material['price'] . 'dollars</li>';
  20. }
  21. return $options;


  24. }


  1. <?php $form = ActiveForm::begin(['id' => 'materials-form']); ?>

  3. <input type ="hidden" id="supplier_id" value = "<?php echo $_GET["supplier"]; ?>">

  5. <input type="text" id="search"/>
  6. <ul name="Materials" id = "materials">

  8. </ul>

  10. <!--<input type="text" name="OrderMaterial[value][]" id="quantity" style="display: none;">-->
  11. <input type="submit" value="Submit" id = "submit"/>
  12. <div class="total"></div>