Develop Reference

Changing text of closet div in an array of divs

I have the following html
<div class="form-group col-md-2 border">
<label for="month">Month 1 - 01/11/2019</label>
<input type="text" class="form-control" id="inputCity[]" name="inputCity[]" value="550">
<label for="Costs">Costs</label>
<input type="text" class="form-control" id="inputcosts" name="costs" value="0">
<label for="grossprofit"><b>Gross Profit</b></label><div id="grossp[]"></div>
</div>
I am attempting to change the grossp[] text depending on what is input into the inputcosts box, using the following
$(document).on('change keydown paste input', '#inputcosts' , function() {
var monthcalc = $(this).closest("input[name='inputCity[]']").val();
var gcost = monthcalc - this.value;
$(this).closest("div[id='grossp[]']").html(gcost);
});
The div is not updating and no error message.
Any ideas?

By documentation, .closest checks self and all parents
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
It's because #grossp[] is not parent of inputcosts.
First select parent and then do .find
$(this).closest('.form-group').find("div[id='grossp[]']")
Since you select by ID, no need to find anything around, since ID is unique in page: $('#grossp[]')
By your naming id='grossp[]' it seems that there is multiple elements by same ID. It's not possible/valid. Only name attribute can contain [] to submit it as array of elements. Any other attribute is just plain text.

Check if element exists in DOM, if not, add it after each radio input

I am changing the default look of radio buttons on a form. In order to do this, I've added a span tag after the input tag with jQuery. This works fine for the radio buttons that are rendered on pageload. However, the form uses conditionals to hide two questions which do not get the span added after the input because they don't exist until they're conditionally shown. The form has a js hook that fires when new fields are conditionally added which I am hooking into. My problem is, if a user conditionally reveals both questions, this span element is added multiple times when I only need it added once.
I've tried to check for duplicate span tags to remove after creating the new ones, but I have not got it to work. I tried saving the newly created radio buttons in a nodelist and loop through them, but that ended up adding as many span tags as the length of the nodelist.
<!-- here is the html, the span is needed after the input tag -->
<div class="radio">
<label>
<input type="radio">
</label>
</div>
// Adds the span to the hidden elements as they are revealed
$(document).on('cf.add', function() {
if ($('.caldera-forms-conditional-field .radio input[type=radio] .radiomark').length == 0) {
$(".caldera-forms-conditional-field .radio input[type=radio]").after("<span class='radiomark'></span>");
}
});
It is adding the span as needed, but the problem is that when that js hook fires again, it adds additional span tags to each radio button. If a user changes an answer on a radio button that triggers the hook, it adds more span tags. Is there a way to check for multiple span tags and remove the duplicates?

You are using a descendant (space between selectors) selector. It looks for any elements that are children of or lower sub-elements. Instead, you are placing the span after the input within the same parent. What you want is the adjacent sibling selector (+) to prevent adding additional spans if the span already exists. The sibling selector looks for elements that have the same parent as the input element and come after the input element
E.g.
<div class="radio"><!-- this is an element -->
<label><!-- this is both a child and descendant of the div.radio element -->
<input type="radio"><!-- this is a descendant of the div.radio element -->
</label>
</div>
However,
<div class="radio">
<label>
<input type="radio"> <!-- This is the element you are looking for -->
</label>
</div>
After the script is called once,
<div class="radio">
<label>
<input type="radio">
<span class="radiomark"></span><!-- This element gets added, it is a sibling of the input element -->
</label>
</div>
So, use + to look for the sibling:
$(document).on('cf.add', function() {
if ($('.caldera-forms-conditional-field .radio input[type=radio] + .radiomark').length == 0) {
$(".caldera-forms-conditional-field .radio input[type=radio]").after("<span class='radiomark'></span>");
}
});

No need to use a conditional to check for length. You can use has() and not() combination to filter only labels that don't have the radiomark and use append()
$('div.radio label').not(':has(.radiomark)').append('<span class="radiomark"></span>')
.radiomark:after { content: 'Radio Mark'; color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio">
<label>
<input type="radio">
</label>
</div>

Using jQuery .fadeOut() on checkbox

My HTML-
<input id="skipOnClick" type="checkbox">- Skip song when notification is clicked?</input>
Then when I run this jQuery $('#skipOnClick').fadeOut();, only the checkbox fades and not the text with it. Is there a way that both the checkbox and text can fade or am I going to have to use another HTML element to put the text in and fade both the checkbox and element?

The input element cannot have a text within it, so you need to wrap the text and input in another element like a label then hide it like
<label for="skipOnClick" id="lblSkipOnClick">
<input id="skipOnClick" type="checkbox">- Skip song when notification is clicked?
</label>
then
$('#lblSkipOnClick').fadeOut();

I experimented a bit before I posted the question and found that by placing all the HTML inside of a div tag then using $('#skipHolder').fadeOut(); fixed the problem.
The HTML-
<div id="skipHolder">
<input id="skipOnClick" type="checkbox">- Skip song when notification is clicked?</input>
</div>

You cannot have a text content inside the checkpox <input>tag. Rather, put a label for it and then fade both of them:
HTML
<input id="skipOnClick" type="checkbox"></input>
<label for="skipOnClick">- Skip song when notification is clicked?</label>
Javascript
$('#skipOnClick').fadeOut();
$('#skipOnClick').next("label").fadeOut();

just put your checkbox inside li
HTML
<input id="skipOnClick" type="checkbox"/><span>- Skip song when notification is clicked?</span>
JQUERY
$('#skipOnClick').change(function(){
$('#skipOnClick').fadeOut();
$('#skipOnClick').next('span').fadeOut();
});
DEMO

Need to have separate click event for two different set of checkboxes using jquery.

I have two sets of check box. One for categories and one For products.
For Categories i have this
<div id="category">
<input type="checkbox" id="cateogry1">
<input type="checkbox" id="cateogry2">
<input type="checkbox" id="cateogry3">
</div>
For Products i have this
<div id="product">
<input type="checkbox" id="product1">
<input type="checkbox" id="product2">
<input type="checkbox" id="product3">
</div>
What i did initially was looped through each checkbox and registered a click event for all like this
$("input:checkbox").each(function(){
var localCheckboxId = '#'+$(this).attr('id');
$(localCheckboxId).click(function() {
//did something
});
});
Now i want to separate the click events for both categories and products.
How to do that using jquery?

Use the containing div ID:
Products:
$("#product input:checkbox").click(...
Categories
$("#category input:checkbox").click(...

You can use a JQuery selector like this:
$("#category input").click(categoryFunction);
and like this:
$("#product input").click(productFunction);
What is happening is that the select first limits the selection to be based on the ID of each div. So the input part means "only input descendents that belong to the parent ID"
Because you only have checkbox input elements there is no need to specify the type. However, if you do actually use more input types then you can add the extra :checkbox part to limit the selector further:
$("#category input:checkbox").click(categoryFunction);
Here is a working example, it even shows how to get the id for the checkbox that is clicked.

You can keep your loop but add a test on the input parent :
if($(this).parent().attr('id') === "category") { ... }
else { ... }

jQuery closest() not working for me (or i'm not working for it)

Given this jQuery:
$('div.MvcFieldWrapper :input').focus(function() {
$(this).closest('label.MvcDynamicFieldError').fadeOut();
});
And given this HTML:
<div class="MvcFieldWrapper">
<label class="MvcDynamicFieldPrompt">Enter your email address:</label>
<label class="MvcDynamicFieldError">Required</label>
<input type="text" value="" />
</div>
Why is the label not fading out when I focus on the input? I know for sure that the focus event is happening.
Thanks

Closest looks through the "parents" not siblings. What you want is prevAll:
$('div.MvcFieldWrapper :input').focus(function() {
$(this).prevAll('label.MvcDynamicFieldError').fadeOut();
});
closest actually means "find the closest ancestor that matches the selector, including the already selected element if it meets the requirements."