We Keep Coding

Hide closest row anchor tag jquery

I have multiple div with class rows and in each row there is a dropdown on change of dropdown i want to hide the anchor tag with class "add_marks" which is inside the same row.
I'm using the following code to hide it:
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row');
var elem = $(nearest_row).closest(".add_marks");
elem.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><i class="material-icons">add</i>Add Marks</div>
</div>
</div>

You have to get the next div and find the a link, then hide it.
var nearest_row = $(this).closest('div.row');
gets you the div.row.clearfix.attr_fields but the link is present in the next div, so doing next gets you the next div element, then you find the 'a' element.
You can also do next('div') instead of getting the next element to find the next div.
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row').next().find('.add_marks').hide();
//console.log(nearest_row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><i class="material-icons">add</i>Add Marks</div>
</div>
</div>

Here is Working code example run it with js (shortcut: ctrl + enter)
...want to hide the anchor tag with class "add_marks" which is inside the same row.
So I have moved that button inside row.
Using .col* as direct child of .row is proper way of using bootstrap grid.
Used the following jQuery considering your requirement.
jQuery(document).on('change', '.subject', function (e) {
$(this)
.parents('.row')
.find('.add_marks')
.hide();
});

How to open div when select the checkbox?

I have a PSD like this.
I want to when select the check box open like https://getbootstrap.com/docs/4.5/components/collapse/#multiple-targets .
I see this demo
Accordion is Important. I want to PSD to bootstrap 4.5
<div class="container-fluid">
<b>درخواست شغل</b>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="change_jobs">قصد انتخاب یا تغییر شغل دارم</label>
<input type="checkbox" id="change_jobs" name="change_jobs" data-toggle="collapse" data-target="#change_jobs" role="button" aria-expanded="false" aria-controls="change_jobs">
<div class="collapse" id="change_jobs">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="job_group">گروه شغلی</label>
<select id="job_group" name="job_group">
#foreach ($job_groups as $job_group)
<option value="{{ $job_group->id }}">{{ $job_group->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="how_cooperate">نحوه همکاری</label>
<select id="how_cooperate" name="how_cooperate">
#foreach ($how_cooperates as $how_cooperate)
<option value="{{ $how_cooperate->id }}">{{ $how_cooperate->name }}</option>
#endforeach
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Could anyone please suggest where I am going wrong?
Thanks.

You should use .slide() function in jQuery.
By defining listener to see when checkbox is check, the div or whatever you want to toggle will hide/show.
$(document).ready(function(){
$('input:checkbox').change(
function(){
if ($(this).is(':checked')) {
$( "p" ).slideDown( "slow", function() {
// Animation complete.
});
}
else{
$( "p" ).slideUp( "slow", function() {
// Animation complete.
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="display:none;">Watch me come and go.</p>
<input type="checkbox">Toggle

Get selected Option from Bootstrap Dropdown

I want to get the currently selected option. I have this html bootstrap code:
<div class="form-group">
<label class="col-md-4 control-label" for="callType">Call</label>
<div class="col-md-6">
<select id="callType" name="callType" class="form-control">
<option value="getBpmn">getBpmn</option>
<option value="getTime">getTime</option>
</select>
</div>
</div>
and the following js:
$(document).ready(function () {
$('#callType').change(dropped)
});
function dropped(){
console.log($(this).parent())
}
But I have no Idea how to get the selected option.

$("select").val() gives you value of selected option. in your code $(this).val() gives you value of select box
$(document).ready(function () {
$('#callType').change(dropped)
});
function dropped(){
console.log($(this).val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-4 control-label" for="callType">Call</label>
<div class="col-md-6">
<select id="callType" name="callType" class="form-control">
<option value="getBpmn">getBpmn</option>
<option value="getTime">getTime</option>
</select>
</div>
</div>

Appending row in container

I am writing a code which dynamically creates rows.
The problem is when I click on button it adds row after the already present row. but Now div with id dynamic contains two rows and so if I click now button it will add two rows. If I use ('#dynamic').html() then it grabs columns but if it is done so it violates the indentation because it will not add the div with class row.
Please any body can tell me the solution to problem?
$(function() {
$("#button1").click(function() {
$("#main-row").after($('#dynamic').html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="above">
<div class="container">
<div class="row">
<div class="col-sm-1">No.</div>
<div class="col-sm-2">Name of Item</div>
<div class="col-sm-3">Quanity</div>
<div class="col-sm-3">Price</div>
<div class="col-sm-1"><span class="btn"></span></div>
</div>
</div>
<div class="container" id="dynamic">
<div class="row padding-3 " id="main-row">
<div class="col-sm-1 ">1</div>
<div class="col-sm-2 ">
<select class="container-fluid">
<option value="1">Computer</option>
<option value="2">Mobile</option>
<option value="3">LCD</option>
<option value="4">Keyboard</option>
<option value="5">Mouse</option>
</select>
</div>
<div class="col-sm-3 "><input class="container-fluid" type="number" name="name" value="" /></div>
<div class="col-sm-3 "><input type="text" name="text" value="" /></div>
<div class="col-sm-1 ">-</div>
</div>
</div>
<button class="btn btn-primary" id="button1">Add Row</button>
</section>

Try:
$(function() {
$("#button1").click(function() {
$('#dynamic').append($("#main-row").clone().removeAttr('id'));
});
});

jQuery .next() next not working when inside div

After seeing my questions replied here and with success, the problems appeared when transposing to my script:
I have a dropdown that is being cloned which shows it's value on a side div. The problem is that when I clone it, the dropdown below don't work and the first updates all the remaining. Code:
Add
<div class="row">
<div class="products-row">
<div class="col-xs-12 nopadding">
<div class="col-xs-2">
<input type="text" id="number1" class="form-control" value="1" />
</div>
<!-- if i remove the div below and leave only the select, it works -->
<div class="col-xs-6" >
<select name="total-checkout" id="name" class="form-control product-name select" >
<option value="25" >A</option>
<option value="50" >B</option>
<option value="75" >C</option>
</select>
</div>
<div class="col-xs-2">
<div class="tags">25</div>
</div>
</div>
</div>
</div>
jQuery:
var count = 0;
$('#add-more').click(function(){
var id = $(".row:last").attr('id');
var appendDiv = $($(".products-row:last")[0].outerHTML);
appendDiv.attr('id', ++id).insertAfter(".products-row:last");
});
$('#name').change(function(event) {
$('.tags').html($('#name').val());
});
$(document).on('change', '.select', function() {
$(this).next(this).html($(this).val());
});
Working jsFiddle:
http://jsfiddle.net/QuadDamage/p843nc9j/
If I remove the <div class="col-xs-6"> from around the <select> the output will appear not formatted but correctly updating the div.
Thanks in advance.

It seems to me that you're targeting .col-xs-2 .tags if this is the case you need this code
$(this).parent().next().find('.tags').html($(this).val());