Develop Reference

Changing content of an single input field after cloning form fields

I am having an interface for my admins where they can add fields to a database. If they want to add several fields they can easily add a new line. This is done by cloning via JavaScript. Now there is one dropdown menu and based on the selection from the dropdown I want to write default values to the text-input fields for min[] and max[].
This works fine if I am having just one line. But if I clone it several times and make a selection (e. g. I am selecting the option "relative_number") in just one line (e. g.) the min and max fields are updated in every line. What can I do so that when the drop down is selected in a certain line only the min and max values in the same line are updated?
Here is my code:
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select"> <option value=""></option> <option value="absolute_number">absolute_number</option> <option value="relative_number">relative_number</option> <option value="likert_5">likert_5</option> <option value="likert_7">likert_7</option> <option value="string">string</option> </select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value=""/>
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value=""/>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>
<script>
$(document).ready(function () {
$(".add-plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function () {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function()
{
var sel_cat = this.value;
if(sel_cat == 'relative_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
}
if(sel_cat == 'absolute_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
</script>
Tried already different ways to solve it via DOM, identifying parent nodes, siblings and so on but I don't get it working.
Thanks a lot in advance for your help!

While you should definitely look at dynamically modifying the names and id's of your cloned inputs, the issue you are having relates to your selectors for min and max
In the case of your javascript
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
You are selecting all min and max on the page.
You need to find the related min and max, which means finding the closet .row to the select-box and then finding the child min/max
var $row = $(this).closest("div.row");
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("100");
jQuery closest()
jQuery find()
Here is a functioning snippet example.
$(document).ready(function() {
$(".add-plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function() {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function() {
var sel_cat = this.value;
var $row = $(this).closest("div.row"); //find the parent row we are in.
if (sel_cat == 'relative_number') {
$row.find('input[id^="min"]').val("0"); //use that row to find the related min
$row.find('input[id^="max"]').val("100"); //use that row to find the related max
}
if (sel_cat == 'absolute_number') {
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select">
<option value=""></option>
<option value="absolute_number">absolute_number</option>
<option value="relative_number">relative_number</option>
<option value="likert_5">likert_5</option>
<option value="likert_7">likert_7</option>
<option value="string">string</option>
</select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value="" />
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value="" />
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>

daterangepicker close parent Bootstrap dropdown

I have a dropdown menu in Bootstrap with a daterangepicker input.
I have this code
$(document).on('click', 'body .dropdown-menu', function (e) {
e.stopPropagation();
});
$('#filter-expired-range').daterangepicker();
and when i click on daterangepicker calendar day input- everything is close (daterangepicker calendar and dropdown menu)
Update 1.
html code :
<div class="btn-group mea-filters-block">
<span style="float: left; padding-top: 12px;" class="mea-info"></span>
<button type="button" class="btn dropdown-toggle btn-filter btn-link" data-toggle="dropdown"
title="Filter">
<i class="fa fa-filter"></i></button>
<ul class="dropdown-menu dropdown-menu-right">
<form id="docExportFilter">
<div class="row">
<div class="col-sm-6" style="border-right: 1px solid #ddd">
<p class="filterslabel"><i
class="fa fa-calendar-check-o"></i>
<span>Validation date</span>
</p>
<div class="form-group">
<input type="checkbox" class="" name="validDocuments" id="filter-valid">
<label for="filter-valid">Valid documents</label>
</div>
<div class="form-group">
<input type="checkbox" class="" name="expired" id="filter-expired">
<label for="filter-valid">Expired documents</label>
</div>
<div class="form-group" id="filter_expired_range_container" style="display: none">
<label for="filter-expired">Expired between dates
<input style="width: 100%" readonly placeholder="Any" type="text"
class="form-control" name="expired_range" id="filter-expired-range">
</label>
</div>
</div>
<div class="col-sm-6">
<p class="filterslabel"><i
class="icon-checkmark-circle2"></i> <span>Compliance</span>
</p>
<div class="form-group">
<input type="checkbox" name="compliant" class="" id="filter-compilant">
<label for="filter-compilant">Compliant documents</label>
</div>
<div class="form-group">
<input type="checkbox" name="remedialActionsRequired" class="" id="filter-remedial">
<label for="filter-remedial">Remedial required</label>
</div>
</div>
</div>
<div class="row pt-15" style="border-top: 1px solid #ddd">
<div class="col-sm-12 text-right">
<a class="mea-submit btn btn-primary"><i class="fa fa-check"></i>Apply</a>
<button class="btn btn-default" type="reset"><i class="fa fa-times"></i> Cancel</button>
</div>
</div>
</form>
</ul>
</div>
UPDATE 2.
Here is minimal example - i see problem is requirejs - if i test it without requirejs - it work ...
example with requirejs (don't work - select date close parent dropdown)
https://jsfiddle.net/5wtLqxk9/2/
example without requirejs (work fine)
https://jsfiddle.net/5wtLqxk9/1/

$("div.daterangepicker").click( function(e) {
e.stopPropagation();
});
Note: place after daterangepicker()
https://jsfiddle.net/5wtLqxk9/4/
Similar to:
event bubbling in Jquery datepicker

This works for me.
$('#your-id-here').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
}).click(function(e) {
$("div.daterangepicker").click( function(e) {
e.stopPropagation();
});
});

Binding values dynamically to a toggle button in jquery

I'm creating a toggle button to which I want to bind a select event. I've created the button, but I have no clue of how to bind the values to it and make it work like a select button. Can someone give me some clue or some examples related to it, so that I can try that out and learn some thing?
My requirement is I've to bind the select event to it and make it work like a select button.
This is how I've created the button:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-6">Tax Value</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle align-right" id="tax_toggle" name="tax_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tax <span class="caret"></span></button>
</div>
<input type="text" id="invoice_request_tax_value" name="invoice_request_tax_value" class="form-control" placeholder="Tax Value" required="required" readonly="readonly">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-12" id="invoice_request_tax_value_label">Tax Value - Nil</label>
</div>
</div>
</div>

Try using knockout.js.
This is what I am using to do the kind of action you want (binding value dynamically)
foreach-binding is the solution to your problem.
Also options-binding can be used, which you can use with select tag only.
See If you can use knockout.

create your observables then bind them per slide/toggle then u can adjust this example such that when toggled the select value in your dropdown becomes yourdropdown.selectedText (javascript) , you will notice which may seem like commented code but are actually conditional statements in ko
<tbody data-bind="foreach: yourObservableArray">
<tr data-bind="attr: { 'id': description }">
<td style="border-bottom: 1px solid #e0e0e0;">
<label data-bind="text: description"></label>
</td>
<td class="td-actions" style="border-bottom: 1px solid #e0e0e0;">
<input type="text" class="input-mini" data-bind="value: amount">
<input type="hidden" class="input-mini" data-bind="attr: { 'id': 'DC_' + description }, value: Totalcost">
</td>
<td class="toggle-soft">
<!-- ko if: description == 'Data' -->
<div id="slider" class="toggle floatright" onclick="toggleCOS()"></div>
<input type="checkbox" disabled="disabled" class="checkbx" id="cos_data" style="display: none;">
</div>
<!-- /ko -->
<!-- ko if: description != 'Data' -->
Cost
<!-- /ko -->
</td>
</tr>
</tbody>

Why is my value getting appended to the hidden field instead of overwritten?

I have a simple filesector i have made (with links as the file names). When i click a filename the following javascript is run:
<script>
$(function () {
$(".fileSelect").click(function () {
var name = $(this).text(); //gets the name of the clicked file
var id = $(this).attr("id");// gets the id of the clicked file
$("#filehiddenid").val(id); // sets the file id, but wrongly appends
$("#fileDisplayText").val(name); //sets the display name
$("#mySelectFile").modal("hide"); //hides the modal file dialog
});
})
</script>
The value being set in the hidden field is the internal id of my file (database id), and the filename is for display.
My problem is that when i repeatedly select a new file, post the form and then selct and post then form etc. etc. Then the value from the file select is appended to the forms collection, so that when i post the form i get something like: 176, 178, 179,
as the values, instead of just 176 which is the latest value I have selected.
*edit: markup added *
This is the markup, please ignore the Razor variables, i named the id's of the input fields to match the javascript, in my code they are generated server side:
<div class="templateSetting">
<div>
<span>
<strong>
#setting.SettingData.Name
</strong>
</span> <br />
<span>#setting.SettingData.Description</span>
<input type="hidden" id="filehiddenid" name="setting_#setting.SettingData.Alias" value="#setting.Value" />
</div>
<div>
<div style="float: left; width: 40%;">
<input type="text" style="width:545px;" id="fileDisplayText" name="meta_setting_#setting.SettingData.Alias" value="#fileName" class="form-control" /></div>
<div style="width: 60%;">
Select File
</div>
<div class="templatealias">#setting.SettingData.Alias</div>
<div style="clear:both;"></div>
</div>
</div>
edit: This the entire markup, rendered:
<form action="/InteractiveApplications/EditApplication/23" id="editform" method="post" name="editform">
<section id="container">
<div id="wrapping" class="clearfix" style="padding-left:10px;width:100%;">
<div id="WorkContent">
<div class="validation-summary-valid" data-valmsg-summary="true">
<ul>
<li style="display:none"></li>
</ul>
</div>
<input data-val="true" data-val-number="The field CurrentFolderId must be a number." data-val-required="Feltet CurrentFolderId skal udfyldes." id="CurrentFolderId" name="CurrentFolderId" type="hidden" value="0">
<input data-val="true" data-val-number="The field ApplicationId must be a number." data-val-required="Feltet ApplicationId skal udfyldes." id="ApplicationId" name="ApplicationId" type="hidden" value="23">
<table style="width: 50%;padding-left: 20px;" class="tablelist">
<tbody>
<tr>
<td valign="top">
<table width="100%">
<tbody>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="Name">Name</label>:
</td>
<td>
<input class="form-control" id="Name" name="Name" type="text" value="Afstemning">
</td>
</tr>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="Description">Description</label>:
</td>
<td>
<textarea class="form-control" cols="20" id="Description" name="Description" rows="2">This is a poll to take when entering the library</textarea>
</td>
</tr>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="Templates">Template</label>:
</td>
<td>
Simple Poll Template
</td>
</tr>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="ApplicationData">Path</label>:
</td>
<td>
<input class="form-control" id="ApplicationData" name="ApplicationData" type="text" value="http://10.0.0.44:81/">
</td>
</tr>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="BlockHostExit">Block host exit</label>:
</td>
<td>
<input checked="checked" data-val="true" data-val-required="Feltet Block host exit skal udfyldes." id="BlockHostExit" name="BlockHostExit" type="checkbox" value="true"><input name="BlockHostExit" type="hidden" value="false">
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" style="padding-left: 20px">
<img src="/InteractiveImages/689a492e-7e01-49cc-b0b3-57e23b621706.jpg" width="100%" style="text-align: center;max-width: 200px;"><br>
<input id="ImagePath" name="ImagePath" type="hidden" value="/InteractiveImages/689a492e-7e01-49cc-b0b3-57e23b621706.jpg"> <a style="color: gray" href="/InteractiveApplications/ChangePicture/23">
Change Picture
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<div class="titleBar" style="padding-left:-10px;height:30px;border-bottom:1px solid #307AAB">
<h2> Application configuration</h2>
</div>
<div style="padding: 10px">
<div>
<div id="templateSettings" class="templateSettings">
<div class="templateSetting">
<div class="templateSettingLeading">
<strong>
Submit Text
</strong><br>
This is the text for the submit button
</div>
<div class="templateSettingInput">
<div style="width:50%;float:left;"> <input type="text" name="setting_submittext" value="qwer" class="form-control"></div>
<div class="templatealias">submittext</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div id="templateSettings" class="templateSettings">
<div class="templateSetting">
<div class="templateSettingLeading">
<strong>
Multiple choice
</strong><br>
This determines if the poll has multiple right answers
</div>
<div class="templateSettingInput">
<input type="hidden" id="setting_ismultiplechoice" name="setting_ismultiplechoice" value="off">
<input id="ismultiplechoice" type="checkbox" name="setting_ismultiplechoice">
<div class="templatealias">
ismultiplechoice
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#checkbox_ismultiplechoice").click(function () {
var settingId = "#setting_ismultiplechoice";
var currentVal = $(settingId).val();
if (currentVal == "off") {
$(settingId).val("on");
}
else {
$(settingId).val("off");
}
});
});
</script>
</div>
<div id="templateSettings" class="templateSettings">
<script type="text/javascript">
var answerCounter = 1;
var trueFalseCounter = 0;
$(document).ready(function () {
$("#addbutton").click(function () {
answerCounter += 1;
trueFalseCounter += 1;
$("#questioninput_question").append("<div id='answer_" + answerCounter + "'>Answer: <input type='text' name='setting_question:" + answerCounter + "' value='' class='form-control' /><input type='checkbox' name='answer_setting_question:" + answerCounter + "' />This is the correct answer <input type='button' value='Delete' class='deleteButton btn btn-warning btn-xs' id='deletebutton_" + answerCounter + "'/></div>");
});
$(".templateSettingInput").on("click", ".deleteButton", function () {
if(confirm("Are you sure you want to delete this answer?"))
{
$(this).parent().remove();
}
});
});
</script>
<div class="templateSetting">
<div class="templateSettingLeading">
<strong> Question</strong>
This is the question and the answers for the poll
</div>
<div class="templatealias">
question
</div>
<div class="templateSettingInput" id="questioninput_question" style="width:50%;">
<textarea cols="40" rows="4" name="setting_question" class="form-control">werwe</textarea>
<input style="vertical-align: top" type="button" id="addbutton" value="Add answer" class="addbutton btn btn-info btn-xs navbar-btn"><br>
<div id="answer_1">
Answer:
<input type="text" name="setting_question:1" value="wer" class="form-control">
<!--<input type='checkbox' name='answer_setting_question:1' />This
is the correct answer-->
<input type="button" value="Delete" id="deletebutton_1" class="deleteButton btn btn-warning btn-xs">
</div>
</div>
</div>
</div>
<div id="templateSettings" class="templateSettings">
<div class="templateSetting">
<div class="templateSettingLeading">
<strong>
Show Answer to user
</strong><br>
determines if the user should see answers
</div>
<div class="templateSettingInput">
<input type="hidden" id="setting_showanswer" name="setting_showanswer" value="off">
<input id="showanswer" checked="'checked'" type="checkbox" name="setting_showanswer">
<div class="templatealias">
showanswer
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#checkbox_showanswer").click(function () {
var settingId = "#setting_showanswer";
var currentVal = $(settingId).val();
if (currentVal == "off") {
$(settingId).val("on");
}
else {
$(settingId).val("off");
}
});
});
</script>
</div>
<div id="templateSettings" class="templateSettings">
<div class="templateSetting">
<div>
<span>
<strong>
Background
</strong>
</span> <br>
<span>Please select a background image</span>
<input type="hidden" id="id_background" name="setting_background" value="172,201,173,175,172,178,178,,">
</div>
<div>
<div style="float: left; width: 40%;"><input type="text" style="width:545px;" id="text_background" name="meta_setting_background" value="611a756c4c3d338fc4ffcebf8b1979d6.png" class="form-control"></div>
<div style="width: 60%;">
Select File
</div>
<div class="templatealias">background</div>
<div style="clear:both;"></div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="mySelectFile" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Select file</h4>
</div>
<div class="modal-body">
<div class="foldertree">
<ul>
<li id="0" class="folder">
All
<ul>
<li id="173" class="file">iStock_000032787140Large.jpg</li>
<li id="174" class="file">52_fordele.jpg</li>
<li id="175" class="file">11376047043_a06bed34bd_o.jpg</li>
<li id="177" class="file">DigitalSignage.png</li>
<li id="178" class="file">mediawall_search_br.jpg</li>
</ul>
</li>
<ul>
<li id="59" class="folder">
Test interactive folder
<ul>
<li id="172" class="file">611a756c4c3d338fc4ffcebf8b1979d6.png</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<div class="templateSettingInput">
<input type="text" name="setting_background" value="172,201,173,175,172,178,178,," class="form-control">
<div class="templatealias">background sdhsdsd</div>
</div>
</div>
<script>
$(function () {
$(".fileSelect").click(function () {
var name = $(this).text();
var id = $(this).attr("id");
var elementId = 'id_background';
var elementText = 'text_background';
$("#" + elementId).val(id);
$("#" + elementText).val(name);
$("#mySelectFile").modal("hide");
});
})
</script>
</div>
</div>
</div>
</div>
</form>

Make sure there aren't other hidden inputs on the page with the same id and view the html in your browser and verify that the value on the element is correct before jquery modifies it.
The jquery id selector (http://api.jquery.com/id-selector/) will only select the first element in the DOM that has that id.
If there are multiple hidden input elements with the same name on the form, they will all get posted to the server.

jQuery .on() issue, console.log() works but element interaction doesn't

I am using this code inside $(document).ready(function(){ ... }):
$('#flavours').on('click', '.toggle-quantity', function(e){
e.preventDefault();
var $quantity_percent = $(this).parent().find('.quantity_percent');
if($quantity_percent.is(':hidden')){
console.log("is hidden");
$quantity_percent.show();
}else{
console.log("is not hidden");
$quantity_percent.hide();
}
});
What's happening is the console.log() is working, but the $quantity_percent is not showing/hiding.
Additionally, if I add an alert('test') to the beginning of the function (just after e.preventDefault) this also doesn't work, but the console.log() continues to work (it correctly logs 'is not hidden').
EDIT: Relevant HTML markup:
<div id="flavours">
<div class="row flavour" id="flavour_1" style="display: block;">
<div class="form-group">
<div class="col-xs-12">
<fieldset>
<legend>Flavour 1</legend>
<div class="col-sm-4">
<label>Flavour Name</label>
<input type="text" value="" name="flavour_name[]" data-flavour-id="1" id="flavour_name_1" class="form-control autocomp" placeholder="Flavour name">
<input type="hidden" value="" name="flavour_id[]" id="flavour_id_1" class="form-control flavour_id">
<p class="flavour_info"></p>
</div>
<div class="col-sm-6">
<label>Flavour Quantity <span class="fa fa-filter"></span> <span class="hidden-sm">Switch to </span>drops per ml</label>
<div class="input-group" id="quantity_percent">
<input type="text" class="form-control" id="flavour_percentage_1" name="flavour_percentage[]" placeholder="Flavour Quantity">
<span class="input-group-addon">%</span>
</div>
<div class="input-group" id="quantity_drops" style="display: none;">
<input type="text" class="form-control" id="flavour_drops_1" name="flavour_drops[]" placeholder="Flavour Quantity">
<span class="input-group-addon">drops/ml</span>
</div>
<p class="flavour_recommended_percentage"></p>
</div>
<div class="col-sm-2">
<label> </label>
<button class="btn btn-danger btn-block remove-flavour"><span class="glyphicon glyphicon-remove"></span> Remove</button>
</div>
</fieldset>
</div>
</div>
</div>

$(this).parent() is a label element which doesn't have a child with .quantity_percent
Also quantity_percent is an id and not a class. Use the ID selector
So use
var $quantity_percent = $('#quantity_percent');
instead of
var $quantity_percent = $(this).parent().find('.quantity_percent');
Note: IDs must be unique in HTML
EDIT: as per OPs comments
I updated it to a class rather than ID (as it's on a dynamically growing list)
Usage
var $quantity_percent = $(this).closest('.col-sm-6').find('.quantity_percent');

The .parent() targets the <label> therefore it can't find .quantity_percent