Develop Reference

When clicking the button, show accordion (Jquery)

I need help with a code. Apparently, it seems like a simple problem. I want to make a script so that when the user clicks the button, it shows the accordion. I was even able to write something that worked, but I wanted to open an accordion for each card separately. I think it's the "this" tag, but the problem is that ".find" doesn't find the accordion because it's not in the same group as the button.
See my code, you will understand better.
$('#fuelAccordion').click(function() {
$(this).find('.cardAccordion').slideToggle('show');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card fuelCard">
<div class="flex">
<div class="col">
<div class="flex">
<div>
<i class="fas fa-angle-down pointer" id="fuelAccordion"></i>
</div>
</div>
</div>
</div>
<div class="cardAccordion">
<div class="flex">
<div class="inputGrid">
<div>
<label for="placa">Litros</label>
<select class="form-control">
<option value="5">5 Lts</option>
</select>
</div>
<div>
<label for="placa">Valor total</label>
<input type="text" class="form-control" value="R$38,46" disabled />
</div>
</div>
<button class="btn btn-primary">Adicionar</button>
</div>
</div>
</div>

You need to use parents because this not find .cardAccordion inside #fuelAccordion
$('#fuelAccordion').click(function () {
$(this).parents('.fuelCard').find('.cardAccordion').slideToggle('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card fuelCard">
<div class="flex">
<div class="col">
<div class="flex">
<div>
<i class="fas fa-angle-down pointer" id="fuelAccordion">Test</i>
</div>
</div>
</div>
</div>
<div class="cardAccordion">
<div class="flex">
<div class="inputGrid">
<div>
<label for="placa">Litros</label>
<select class="form-control">
<option value="5">5 Lts</option>
</select>
</div>
<div>
<label for="placa">Valor total</label>
<input type="text" class="form-control" value="R$38,46" disabled />
</div>
</div>
<button class="btn btn-primary">Adicionar</button>
</div>
</div>
</div>

how to display form with div correctly?

I have this part of form field
When user click on the Add button will copy the above form field and user can add more in this field .
but when I add <div id="ownership"> above the code form it start to look like this
I need to put id=ownership because I want to use it in my jQuery function
<div id="ownership">
<div class="col-lg-12 mb-30 ">
<label for="add_owner"><b><span style="color:#e60000;">*</span> Name</b></label><br>
<input class="from-control" type="text" id="name" >
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Phone number</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="phone" >
</div>
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Emailn</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="email" id="email">
</div>
</div>
</div>
<div id="owner"></div>
<br>
<div class="col-md-12">
<button type="button" class="btn btn-success w-30 add_info f-r">Add</button>
</div>
<script>
$(document).ready(function(){
$(".add_info").click(function(){
var newForm = $("#ownership").clone();
$('input', newForm).val('');
$('owner').append(newForm);
});
});
</script>
How do I fix the code in order to achieve the image in number 1 ?

try this
<div class="row">
<div class="col-sm-6"> Text</div>
<div class="col-sm-6"> Text</div>
</div>
you need to apply this format then design will be properly according your desirable.

Try this way. Always use bootstrap col class inside row class then it will not cause unexpected result.
<div class="row">
<div class="col-md-12"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>

How can I get the child element value using jquery looping?

I want to get the child element dynamically. I am looping through the div tag to get the values. But its not working.
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" xl="12" value="a">
</div>
<div class="fg">
<input type="text" xl="34" value="b">
</div>
</div>
</div>
</div>
The javascript function for fetching the value dynamically
This code is working if row and col div are not there. But when they are included its not working at all. Anyone can please help me with this issue!
$(".pg").each(function(){
$(this).children(".fg").each(function() {
console.log($(this).attr('xl'));
});
});

First using children(), will return only direct children , not deep search ,
Second , use data-xl instead of xl ,more information here about data attribute
also , the loop is accessing the parent div of input , so use ".fg input" instead
for searching use find() , then change selector to access directly your input , .find(".fg input")
See below working snippet :
$(".pg").each(function() {
$(this).find(".fg input").each(function() {
console.log($(this).val() ,"=", $(this).data('xl'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" data-xl="12" value="a">
</div>
<div class="fg">
<input type="text" data-xl="34" value="b">
</div>
</div>
</div>
</div>
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" data-xl="15" value="c">
</div>
<div class="fg">
<input type="text" data-xl="84" value="d">
</div>
</div>
</div>
</div>

Two Click Functions with Parents

I am building a specific time checkbox and upon click I need the days of the week to drop down with a checkbox. Once the user clicks that checkbox the [From - To] appears.
The thing is I have multiple of these going down and need to only display for the certain one I clicked.
So far I only have it set it for Monday but I cant get the from-to to appear on the first one.
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
</div>
</div>
</div>
$('.specificTime').on('click', function() {
$(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});
$('.monday').on('click', function(){
$(this).parents('.specificHolder').find('.monday_to_from').toggle('slow');
});
https://jsfiddle.net/y1b8fr20/

Update
Using toggle() between more than one trigger creates a confusing behavior. This update separates the sliding of up and down and listens for the change event instead of the click event for more control between .monday checkboxes. Now it will behave as follows:
The to from boxes only appears when a .monday checkbox is checked
If a .monday checkbox is unchecked, the .to from boxes will slideUp.
If either .monday is checked, fromto stays.
fromto will only slideUp if both .mondays are unchecked
You have only one from to input so this is sufficient:
$('.monday').on('change', function() {
if ($('.monday').is(':checked')) {
$('.monday_to_from').slideDown('slow');
} else {
$('.monday_to_from').slideUp('slow');
}
});
Move this out of the influence of the second set of checkboxes:
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
Demo
$('.specificTime').on('click', function() {
$(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});
$('.monday').on('change', function() {
if ($('.monday').is(':checked')) {
$('.monday_to_from').slideDown('slow');
} else {
$('.monday_to_from').slideUp('slow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>

Jquery clear form in a section

for the following:
<div class="section grouping">
<div class="sectionControl">
<div class="parent row errorOn">
<div class="validGroupControl">
<div class="row2 itemWrap clearfix">
<label>Login1 (adress e-mail)<span class="iconReq"> </span>:</label>
<input type="text" class="text">
</div>
<div class="itemWrap clearfix">
<label>Input field1<span class="iconReq"> </span>:</label>
<input type="password" class="text">
</div>
remove
</div>
</div>
</div>
<div class="row addControl">
Add
</div>
</div>
when I run this:
$('div.addControl a.button').click(function () {
var parent = $(this).closest('.section.grouping').find('.parent:last');
parent.after(parent.clone());
});
it clones 'parent' section which works great. But i want it to clone it without values in the input fields.
what's the best way to clear all input fields in a section?
thanks

Can't see any reason why this won't work..
var oClone = parent.clone();
oClone.find("input").val("");
parent.after(oClone);