We Keep Coding

Get textarea value from selected input by data id, from appended (jquery) elements

I was able to get the value for Description (textarea) from the first service (selected input) (which is right), for the attribute of data id, but I'm having a problem getting it from appended elements, after using the add more button
What am I missing, please?
Below is my code and I can explain further if need be.
<div class="service-box">
<div class="row">
<div class="col-md-12 service-group">
<div class="row">
<div class="form-group mb-3 col-md-6">
<label class="form-label">Service</label>
<div >
<select type="text" class="form-select" placeholder="Services" value="" name="service" id="service">
<option value="" disabled selected>Select your option</option>
#foreach ($services as $service)
<option value="{{$service->service_name}}" data-id="{{$service->description}}">{{$service->service_name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group mb-3 col-md-6">
<label class="form-label">Amount</label>
<div >
<input type="text" class="form-control" name="amount" id="amount" placeholder="Amount">
</div>
</div>
<div class="form-group mb-3 col-md-12">
<label class="form-label">Description</label>
<textarea class="form-control" id="description" name="description" rows="6" placeholder="Content.." readonly></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" id="addmore" class="btn btn-default">Add more</button>
<button type="button" id="remove" class="btn btn-default">Remove</button>
</div>
$("#addmore").click(function() {
var serviceGroupHTML = $('.service-group').html();
$( ".service-box" ).append(serviceGroupHTML);
});
$("#remove").on("click", function() {
$(".service-box").children().last().remove();
});
<!-- This is where the problem lies -->
const service = new Array(document.getElementById("service"));
const description = new Array(document.getElementById("description"));
service[0].addEventListener("change", function(){
description[0].value = $('#service option:selected').data('id');
})
service[1].addEventListener("change", function(){
description[1].value = $('#service option:selected').data('id');
})

As your newly created element are dynamic so you need to bind it with static element. Then, you can get the value of the data-attribute by using $(this).find("option:selected").data("id") and assign this to your textarea of that particular group .
Demo Code :
$("#addmore").click(function() {
$('.service-group:first').clone().find("input:text,textarea").val("").end()
.appendTo('.service-box');
});
$("#remove").on("click", function() {
$(".service-box").children().last().remove();
});
$("body").on("change", "select[name=service]", function() {
//get description for data-attribute
var description = $(this).find("option:selected").data("id");
//assign value
$(this).closest(".service-group").find("textarea[name=description]").val(description)
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="service-box">
<div class="row service-group">
<div class="col-md-12">
<div class="row">
<div class="form-group mb-3 col-md-6">
<label class="form-label">Service</label>
<div>
<select type="text" class="form-select" placeholder="Services" value="" name="service">
<option value="" disabled selected>Select your option</option>
<option value="1" data-id="This test">XYZ</option>
<option value="1" data-id="This test22">Z22</option>
<option value="1" data-id="This test33">YZ33</option>
</select>
</div>
</div>
<div class="form-group mb-3 col-md-6">
<label class="form-label">Amount</label>
<div>
<input type="text" class="form-control" name="amount" id="amount" placeholder="Amount">
</div>
</div>
<div class="form-group mb-3 col-md-12">
<label class="form-label">Description</label>
<textarea class="form-control" name="description" rows="6" placeholder="Content.." readonly></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" id="addmore" class="btn btn-default">Add more</button>
<button type="button" id="remove" class="btn btn-default">Remove</button>
</div>

get the selected item added dynamically jquery

I managed to dynamically add input fields using this code :
My HTML :
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row ">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
My script :
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(
`
<div class="col-12">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
No, I'm trying to get the id_casting of each selected item in selecbox for each added rows
So I tried the following scipt :
<script type="text/javascript">
$(document).ready(function(){
$("#id_casting").change(function(){
console.log("clickk");
let id_casting = $(this).find("option:selected").data("id");
console.log(id_casting);
});
});
/* });*/
</script>
Bu this script get only the id_casting of the first row and when I add a new row and I select item from select-box it doesn't get the id_casting of the selected item of select-box added
dynamically.

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();
});

Manipulating the DOM of a collection of divs using Jquery

Am working on the frontend part of an application whereby I have
some form inputs (wrapped in divs). Each div has a button called
Add Beneficiary. Basically when the user clicks on the button, the div
below it should be displayed (which is hidden by default) and the
sequence continues (each button on a div clicked the div below it
displays).
On the button of each div I have writen some logic whereby on click event
a function called addBeneficiary is triggered. I parse the id of the
button clicked. Next in the function I manipulate the DOM by reaching
out to the parent div and displaying it but the logic does not
work.
~ Kindly assist?
Markup
<!--Person One-->
<div class="container mg-t-30" id="beneficiary1">
<div class="row col-11 mx-auto">
<div class="col-12">
<div class="row">
<div class="col-6">
<label> Category</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="col-6">
<label>Family Size</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="row">
<div class="col-12">
<button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
</div>
</div>
</div>
</div>
</div>
<!--Person Two-->
<div class="container mg-t-30" style="display:none;" id="beneficiary1">
<div class="row col-11 mx-auto">
<div class="col-12">
<div class="row">
<div class="col-6">
<label> Category</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="col-6">
<label>Family Size</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="row">
<div class="col-12">
<button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
</div>
</div>
</div>
</div>
</div>
Logic
function addBeneficiary(beneficiary){
let check = $('#' + beneficiary).parents('div').last().prop('id');
//console.log(check);
$("check").css("display", "block");
}

Its not working because both parents div id is "beneficiary1". And you can't use same id with multiple tag. It should be unique like beneficiary1, beneficiary2 & so on... And also little bit change into your script.
function addBeneficiary(beneficiary){
let check = $('#' + beneficiary).parents('div').next('div');
//console.log(check);
check.css("display", "block");
}
jsfiddle https://jsfiddle.net/y2mva6es/

Jquery - Cloning collapsible divs

So im trying to build the front end of a form builder however i've run into a problem when trying to clone collapsible elements. Im an absolute beginner at jquery so sorry for the dirty code.
When an element is cloned and it is nested under itself with a modified sortable jquery plugin, any one of the bottom levels collapsible's will open the collapsible of the top level parent (but not any of the other nested elements).
My jquery is:
var count = 1;
$("#displayUpload").click(function() {
var clonecount = 'Uploadpanel' + count;
var cloneobject = $("#toggleUpload").clone(true).appendTo(".sortable").show();
$("#Uploadpanel", cloneobject).attr('id', clonecount);
$(cloneobject, this.id).on("click", (".edit", ".panel-title"), function() {
$("#" + clonecount, this.id).collapse('toggle');
});
$(cloneobject).on("click", ".remove", function() {
$(cloneobject).remove();
});
count = count + 1;
});
Html:
<li id="toggleUpload" data-role="main" class="js-form-element" style="display: none">
<div>
<div class="panel panel-default" data-role="collapsible" id="panel3">
<div class="panel-heading">
<h4 class="panel-title" data-target="#Uploadpanel"
href="#Uploadpanel">
<a data-target="#Uploadpanel"
href="#Uploadpanel" class="edit">
File upload
</a>
<span class="btn-group pull-right">
<a data-target="#Uploadpanel"
href="#Uploadpanel" class="collapsed">Edit</a>
<span class="padding-line">|</span>
<a class="remove" href="#">Delete</a>
</span>
</h4>
</div>
<div id="Uploadpanel" class="panel-collapse collapse">
<div class="panel-body">
<div class="margin-bottom-20">
<p class="font-italic">Label:</p>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Label">
</div>
<div class="margin-bottom-20">
<p class="font-italic">Placeholder text:</p>
<input type="text" class="form-control" placeholder="Placeholder message">
</div>
<div class="margin-bottom-5">
<div class="checkbox">
<label>
<input id="required" type="checkbox"> Required
</label>
</div>
</div>
<div class="margin-bottom-20">
<p class="font-italic">Validation message:</p>
<input type="text" class="form-control" id="validation" placeholder="Validation message">
</div>
<div>
<div class="row">
<div class="col-sm-6">
<p class="font-italic">Form input size:</p>
<div class="form-group">
<select name="form_select">
<option value="0">100% (1 in a row)</option>
<option value="0">33% (3 in a row)</option>
<option value="0">50% (2 in a row)</option>
</select>
</div>
</div>
<div class="col-sm-6">
<p class="font-italic">Form position:</p>
<div class="form-group">
<select name="form_select">
<option value="0">Left</option>
<option value="0">Middle</option>
<option value="0">Right</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
Any help would be great,
Thanks

There can be some issues using clone on objects that already has event handlers. I had this issue for a while, and I just resolved it by creating a function that generates a new jQuery object, instead of cloning an existing one.