We Keep Coding

How to get value of appended input div on appended button click?

I have simple HTML like this;
<div id="buildyourform">
<div class="row">
<div class="col-sm-6">
<div class="input-group mb-2">
<select class="form-control" id="language">
#foreach($language as $l)
<option value="{{$l->id}}" >{{$l->name}}</option>
#endforeach
</select>
</div>
</div>
<a href="javascript:void(0)" id="save-button" class="btn btn-light btn-sm ">
<i class="fa fa-ban"></i>
Upload
</a>
</div>
</div>
</div>
I have a plus button, using which I am appending the same fields below. Now I want to retrieve the respective selected language id with the click of the respective upload button.
But every time it returns me the value of first select field.
Here is what I have tried;
$(document).on('click', '#save-button', function(){
var obj=$(this);
//language = obj.closest("div[class=row]").find("select[id=language]").val();
language = $(this).parent().find("select[id=language]").val();
console.log(language);
});
Can anyone let me know how to get respective selected language id on respective button click?

You need to use prev function and change select[id=xxxx] by select#language
https://api.jquery.com/prev/
$(document).on('click', '#save-button', function(){
var obj=$(this);
//language = obj.closest("div[class=row]").find("select[id=language]").val();
language = $(this).prev('.col-sm-6').find("select#language").val();
console.log(language);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buildyourform">
<div class="row">
<div class="col-sm-6">
<div class="input-group mb-2">
<select class="form-control" id="language">
#foreach($language as $l)
<option value="{{$l->id}}" >{{$l->name}}</option>
#endforeach
</select>
</div>
</div>
<a href="javascript:void(0)" id="save-button" class="btn btn-light btn-sm ">
<i class="fa fa-ban"></i>
Upload
</a>
</div>
</div>

Animate.CSS element is behind other elements

I created a Bootstrap live-search picker that is added by jQuery and animated by Animate.CSS after clicking on the green plus button. Without animate CSS, the Picker behaves like a charm. Unfortunately, using animation classes of Anmiate.CSS, the picker is always below all the other content (see Screenshot).
The selectpicker is added by the following code. In the variable "select" are the option values, that are inserted in the picker. Finally, the select picker is initialized.
$('#addPosition').click(function() {
...
$('#articlelist').append("<div style='margin-top: 5px;' class='animated rollIn buffer'>"+
"<div class='row'>"+
"<div class='col-sm-1'><button type='button' class='btn btn-danger btn-sm removePositionArticles'><span class='fa fa-minus'></span></button></div>"+
"<div class='col-sm-8'>"+
select+
"</div>"+
"<div class='col-sm-3'><input type='number' class='form-control' name='addamount[]' value=''></input></div>"+
"</div>");
//Initialize Selectpicker
$('.selectpicker').last().selectpicker();
}
The resulting HTML Code looks like the following:
<div style="margin-top: 5px;" class="animated rollIn buffer">
<div class="row"><div class="col-sm-1">
<button type="button" class="btn btn-danger btn-sm removePositionArticles">
<span class="fa fa-minus"></span>
</button>
</div>
<div class="col-sm-8">
<div class="btn-group bootstrap-select form-control open">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Niska Teppich" aria-expanded="true">
<span class="filter-option pull-left">Niska Teppich</span>
<span class="bs-caret"><span class="caret"></span></span>
</button>
<div class="dropdown-menu open" style="max-height: 585.458px; overflow: hidden; min-height: 123px;">
<div class="bs-searchbox">
<input type="text" class="form-control" autocomplete="off">
</div>
<ul class="dropdown-menu inner" role="menu" style="max-height: 536.458px; overflow-y: auto; min-height: 74px;">
<li data-original-index="0" class="selected active">
<a tabindex="0" class="" style="" data-tokens="null">
<span class="text">Niska Teppich</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
//Further Options
</ul>
</div>
<select class="form-control selectpicker" name="addarticleid[]" data-live-search="true" tabindex="-98">
<option value="1">Niska Teppich</option>
//Further Options
</select>
</div>
</div>
<div class="col-sm-3"><input type="number" class="form-control" name="addamount[]" value=""></div>
</div>
The additional elements that are added look the same. The Button is a "regular" Bootstrap Button with Bootstrap Classes. I tried playing with z-Index to remove this problem, but however it is not working.
Can you help me? Of course, I can just avoid using animate.css, but this is not my final intention :-/

try adding the following in your css file. This should take care of it.
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:none!important;animation-fill-mode:none!important}
Source: https://github.com/daneden/animate.css/issues/596

JQuery click event occurs same thing in different div

i am trying to make a order form in which user select menu items from list and menu items add separately in order form. I am trying to do this thing by jQuery but, in this i have face many of problem. I am newbie in jquery.
Script
$(document).ready(function () {
var index = 0;
$(".addCart").on('click', function(e) {
e.preventDefault();
var menuitem = $(this).parent().parent().find('.menuName').attr("data-value"),
menuprice = $(this).parent().parent().find('.menuPrice').attr('data-value');
index++;
var fieldHTML ='<span class="addMenu">\n'
+'<button class="btn-sm btn btn-success increment" id="increase"><i class="fa fa-plus"></i></button>\n'
+'<input type="text" value="1" readonly name="quantity" class="quantity">\n'
+'<button class="btn-sm btn btn-success decrement" id="decrease"><i class="fa fa-minus"></i></button>\n'
+'</span>';
var fieldHTML2 ='<li id="cartItem_'+index+'" class="page-header">\n'
+'<div class="row">\n'
+'<div class="">\n'
+'<i class="fa fa-dot-circle-o"> '+menuitem+' </i>\n'
+'</div>\n'
+'<div class="col-sm-9" id="">\n'
+'<span>\n'
+'<button class="btn-sm btn btn-success increment" id="increase"><i class="fa fa-plus"></i></button>\n'
+'<input type="text" value="1" readonly name="quantity" class="quantity">\n'
+'<button class="btn-sm btn btn-success decrement" id="decrease"><i class="fa fa-minus"></i></button>\n'
+'<span style="color:grey;"> x <i class="fa fa-inr per_price"> '+menuprice+' </i></span>\n'
+'</span>\n'
+'</div>\n'
+'<div class="col-sm-3">\n'
+'<span style="color:grey;"><i class="fa fa-inr sub_price"> '+menuprice+' </i></span>\n'
+'</div>\n'
+'</div>\n'
+'</li>';
$(this).parent().html(fieldHTML);
$("#cart").append(fieldHTML2);
function getTotal() {
$('.subtotal').show();
var sum = 0;
$('.sub_price').each(function () {
var menuPrice = Number($(this).text());
// add only if the value is number
if(!isNaN(menuprice) && menuprice.length!=0) {
sum = sum + menuPrice;
}
});
$('#sum').html(sum.toFixed(2));
}
getTotal();
$(".increment").click(function () {
var $n = $(this).parent().find(".quantity");
if($n.val() !=10) {
$n.val(Number($n.val())+1);
var qty = $('[name="quantity"]').val();
var subPrice = parseInt(qty) * parseFloat(menuprice);
$('.sub_price').text(subPrice);
getTotal();
}
});
$(".decrement").click(function() {
var $n = $(this).parent().find(".quantity");
if($n.val() !=1) {
$n.val(Number($n.val())-1);
var qty = $('[name="quantity"]').val();
var subPrice = parseInt(qty) * parseFloat(menuprice);
$('.sub_price').text(subPrice);
getTotal();
} else {
$(".addMenu").remove();
$("#cart").remove();
$(".AddMenu").html('<button class="btn btn-success addCart">ADD</button>');
$('.subtotal').hide();
}
});
});
});
JSP
<div class="col-md-7">
<ul id="tabs">
<li class="active">Breakfast</li>
<li>Lunch</li>
<li>Dinner</li>
<li>Choose your menu</li>
</ul>
<ul id="tab">
<li class="active">
<h2>Breakfast</h2>
<p></p>
</li>
<li>
<h2>Lunch</h2>
</li>
<li>
<h2>Dinner</h2>
</li>
<li>
<h2>Menu List</h2>
<div class="row">
<div class="col-sm-12">
<div class="col-sm-9">
<div class="col-sm-2">
<i class="fa fa-dot-circle-o"></i>
</div>
<div class="col-sm-6">
<p><b class="menuName" data-value="${menu.menuItem}"><c:out value="${menu.menuItem}"/></b></p>
</div>
<div class="col-sm-2">
<i class="fa fa-inr menuPrice" data-value="${menu.price}"> <c:out value="${menu.price}"/></i>
</div>
</div>
<div class="col-sm-3 AddMenu">
<button class="btn btn-success addCart">ADD</button>
</div>
</div>
</div>
<div class="row">
</div>
</li>
</ul>
</div>
<div class="col-md-5" id="vendorInfo">
<h4 class="border-bottom">Your Order</h4>
<ul id="cart">
</ul>
<div class="subtotal" style="display: none">
<div class="col-sm-10">
<p style="color:grey; font-weight: bold;">Subtotal</p>
</div>
<div class="col-sm-2">
<span class="fa fa-inr" style="color:grey; font-weight: bold;" id="sum"> </span>
</div>
</div>
</div>
Form Image
Problem
1. First, increment and decrement (+ -) work only one div. when click + or - , it not increase or decrease corresponding item in right div of order.
2. When i add any menu item first time, it add and calculate total
correctly, but second time when add other item and click on +, then second item price is multiply by first item quantity.
3. Subtotal of current item placed at other item's subtotal.
4. I want that when any individual item quantity is 1 and then click on
- , it remove from cart and ADD button placed at menu list again, but actually when i click on -, all cart item remove and ADD button is placed in whole menu list.
So, please solve my issue and tell me what thing i did wrong.
Thanks!

ngRepeat doesn't display items

We're working on a e-commerce platform at my work and we use AngularJS. Yesterday we put a great amount (200+, in small quantities it works well) of products in the bag and a bug started, some items aren't listed but it is in the HTML when we inspect elements.
The following codes are what we have:
The directive:
class dSacolaItem{
constructor(){
this.restrict = 'EA';
this.templateUrl = 'views/directives/component-sacola-item.html';
this.scope = {
dirParent: '=?dSacolaItem'
};
}}
The template of the items:
<div class="row block-item" ng-repeat="(key, prod) in dirParent.data track by $index">
<div class="col-xs-12 col-sm-4 col-md-6">
<div class="box-img pull-left">
<img class="img-responsive" ng-src="images/photos/50/{{::prod.imagem}}" d-err-src="images/photos/50/0.jpg" alt="{{::prod.descricao_curta}}">
</div>
<div class="box-infos pull-left">
<h5 class="text-uppercase text-primary" ui-sref="main.produto({ idproduto: {{::prod.id_produto}}, descricao: '{{::prod.descricao_link}}' })">{{::prod.descricao_curta}}</h5>
<small>{{::prod.var1 == undefined ? 'Único' : prod.var1}} | {{::prod.var2 == undefined ? 'Único' : prod.var2}} | {{::prod.var3 == undefined ? 'Único' : prod.var3}}</small>
<button class="btn btn-default btn-xs" type="button" ng-click="dirParent.removeItem(prod.id_variacao)">
<span ng-show="dirParent.removing_prod != prod.id_variacao">remover</span><span ng-show="dirParent.removing_prod == prod.id_variacao"><i class="fa fa-refresh fa-spin"></i></span>
</button>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-1 text-center">
<div class="box-gift text-center">
<form name="fGift" ng-submit="false" novalidate>
<label class="gift-prod" ng-if="::(dirParent.configs.produto_preco_presente > 0)">
<input type="checkbox" name="presente" ng-model="prod.presente" ng-change="dirParent.setGift( key, prod.presente )">
<div>
<i class="fa fa-gift fa-3x"></i>
<small>PRESENTE</small>
<small>(R$ {{::dirParent.configs.produto_preco_presente | currency: '': 2}})</small>
</div>
</label>
</form>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-1 text-center">
<div class="box-qtde" tooltip-placement="left" uib-tooltip="Em estoque: {{::prod.estoque}}" tooltip-enable="prod.estoque == prod.qtde">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-primary" ng-click="dirParent.updateQtde('decrement', key)" ng-class="{'disabled': prod.qtde == 1}"><i class="fa fa-angle-down"></i></button>
</div>
<div class="btn-group">
<button class="btn btn-primary" ng-click="dirParent.updateQtde('increment', key)" ng-class="{'disabled': prod.estoque == prod.qtde}"><i class="fa fa-angle-up"></i></button>
</div>
</div>
<input class="form-control text-center" type="text" ng-value="prod.qtde" disabled="disabled">
<i class="fa fa-refresh fa-spin refresh-qtde" ng-style="dirParent.value_load[key]"></i>
</div>
</div>
<div class="col-xs-6 col-sm-2 box-values text-center">
<span>unitário:</span>
<h5 class="text-primary">R$ {{::prod.preco | currency: '': 2}}</h5>
</div>
<div class="col-xs-6 col-sm-2 box-values text-center">
<span>total:</span>
<h5>R$ {{prod.preco * prod.qtde | currency: '': 2}}</h5>
</div>
I tried to use one-time binding in every place that was possible, but some data needs to be updated...
And finally, how I call the directive:
<div class="shopping-items" d-sacola-item="bag"></div>
I tried to put infinite scroll but it didn't work and also went through a lot of articles trying to fix this but nothing helped.
Some prints of the problem (look to the scroll)
Begin of displayed data (scroll is in 1/3 of the page)
Item not displayed but in the HTML
Anyone with the same problem? I don't know anymore what I should do to fix it.
[add 1]: It seems only browsers that use chromium (Chrome, Opera...) have the issue. Firefox, IE, edge and wow safari 5.1 (2012 version) show everything with some hard work, but at least they display data correctly.

retrieve dynamically created values of hidden input with jquery

The following is the form created via php.
<form method="POST" action="http://localhost:8000/resources/11" accept-charset="UTF-8">
<label for="tag">Tagname</label>
<input class="form-control" id="tags" name="tagname" type="text">
</div>
<div id="tagnames" class="control-group clearfix">
<div class="tag-wrapper pull-left">
<button data-original-title='This is about quantum description.' data- placement="top" data-toggle="tooltip" class="btn btn-default tag_tooltip" type="button">
<span class="tagname">
quantum <i class='fa fa-times cancel'></i>
</span>
</button>
</div>
<div class="tag-wrapper pull-left">
<button data-original-title='This is about kids!' data-placement="top" data- toggle="tooltip" class="btn btn-default tag_tooltip" type="button">
<span class="tagname">
kids <i class='fa fa-times cancel'></i>
</span>
</button>
</div>
<input id="tag_ids" name="tag_ids" type="hidden" value="4,5">
</div>
<div id="tagname"></div>
<button type="submit" class="btn btn-primary submit_button">
<span class="fa fa-pencil-square-o"></span>
Update
</button>
<a class="btn btn-default" href="http://localhost:8000/resources">Cancel</a>
</form>
I want to alert(4) or alert(5) whichever corresponding tagname I click on.And I should be able to remove that id from the value.
Can anyone please help me?
I been scratching for two days for this problem.

I would suggest you to do this way by splitting into arrays and get the index:
$('.tag_tooltip .fa-times').on('click', function(){
var o = $('#tag_ids').val().split(','), // creates an array
idx = $(this).closest('.tag-wrapper').index(), // get the index of closest parent
value = o.splice(idx, 1); // remove the value
$('#tag_ids').val(value); // apply the new values
alert($('#tag_ids').val());
});