We Keep Coding

JavaScript code not working with multiple HTML elements

I've build myself a sign input on my website inside a modal popup. The problem is that I can have an unknown amount of modals generated in a foreach within PHP. Because of this my JavaScript code don't works anymore. Do you have any idea how I can improve my function to make it workable for a undefined amount of signature modals?
var signaturePad;
jQuery(document).ready(function () {
jQuery(document).on('opened', '#sign-modal', function () {
var signaturePadCanvas = document.querySelector('.signature-pad-canvas');
var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
signaturePadCanvas.setAttribute("width", parentWidth);
signaturePad = new SignaturePad(signaturePadCanvas);
jQuery('#clear-signature').click(function () {
if (signaturePad) {
signaturePad.clear();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#3.0.0-beta.3/dist/signature_pad.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/remodal#1.1.1/dist/remodal.min.js"></script>
<div id="sign-modal" class="remodal remodal remodal-is-initialized remodal-is-opened" data-remodal-id="sign-nda-modal-1234567889">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Hello</h1>
<p>I am a random text</p>
<div class="signature-pad-canvas-container">
<div class="signature-pad-canvas-wrapper">
<canvas class="signature-pad-canvas"></canvas>
</div>
<div class="clear-signature-wrapper">
<span id="clear-signature">Delete</span>
</div>
</div>
<br>
<div class="remodal-buttons">
<button data-remodal-action="cancel">Cancel</button>
<button onclick="sign('123abc', '456cdf')">Sign</button>
</div>
</div>
<div id="sign-modal" class="remodal remodal remodal-is-initialized remodal-is-opened" data-remodal-id="sign-nda-modal-9876543">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Hello</h1>
<p>I am a random text</p>
<div class="signature-pad-canvas-container">
<div class="signature-pad-canvas-wrapper">
<canvas class="signature-pad-canvas"></canvas>
</div>
<div class="clear-signature-wrapper">
<span id="clear-signature">Delete</span>
</div>
</div>
<br>
<div class="remodal-buttons">
<button data-remodal-action="cancel">Cancel</button>
<button onclick="sign('764647gc', 'iuhiz78')">Sign</button>
</div>
</div>
......

The reason why your modals have stopped working is because each modal you create is created with the same id.
This means that when you access the element with DOM, only the first element would be returned. Using a class is not the best idea as you lose the ability to target specific elements without looping.
The best solution in my opinion is to dynamically generate the id as you create your modals. This means you could have something like sign-modal-1, sign-modal-2 etc for each modal you create.
Then, in JQuery, you target elements with ID's that get opened, that begin with sign-modal, i.e. using the JQuery attribute selector.
JQuery Attribute Selector:
https://api.jquery.com/attribute-starts-with-selector/

two division put the details in inner div using jquery

i have 2 divisoin
<div id="details">
<div id="feature">
</div>
</div>
I need to put the content using $("#details").html(content); (it is working correctly) like that way i need to put the content inside feature div i am using following way:
$("#details #feature").html(content);
but it is not working..how to solve?

When you use $("#details").html(content); you override the content of the div. So you're inner div with the id feature gets removed. Maybe you use $("#details").prepend(content); or you add another div for the main content and replace that content.
Look here is an example:
https://jsfiddle.net/morrisjdev/s9u7rfcu/

ID is a unique attribute so you can directly use id like below.
$(function() {
var content = "Some text here";
$('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
OR
$(function() {
var content = "Some text here";
$('#details').find('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>

$(document).ready(function(){
var htmldetail ="Hello! I am Here";
var details = $("#details").html(htmldetail);
$("#userfeature").html(details);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="details">
<div id="userfeature">
</div>
</div>

The second is #feature and not #userfeature. And also add the jQuery Library as well. You can replace test with content variable.
$("#feature").html("test");
<div id="details">
<div id="feature">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
And also remember Id is unique and hence no need to mention its parent.
Run the following snippet and you can get the output.

Simple way..Go Through this
HTML
<div id="details">
<div id="feature">
</div>
</div>
JQUERY
$(document).ready(function()
{
var content="contain sample data";
// $("#details").html(content); if you wrote like this,
this will replace all content, so the inner div will be replaced
$("#details").append(content); // outer div
$("#feature").html(content);
});

Or you can use css-like selector method:
$(document).ready(function() {
$('#details > #feature').html('Hello <strong>World!!!</strong>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>

I have created a plunk for it and it is working.
Try including the action inside
$( document ).ready(function() {
console.log( "ready!" );
var content = 'Hey there';
$("#details #feature").html(content);
});
Plunk :- http://plnkr.co/edit/63GsIoGmprnKs7oe77cF?p=preview

Get sister element using jQuery

Is there a way to get a next element from a current sister element? Sorry if confusing.
<div class="wrapper">
<div class="paDiv">
<div class="saDivOne">
</div>
</div>
<div class="paDivTwo">
<div class="saDivTwo">
</div>
</div>
</div>
<script>
$('.paDiv').each(function(){
htmlContent = $(this).children().html();
SisterDivContent = $(this).next('.paDivTwo').children().html();
console.log(SisterDivContent);
})
</script>

$('.paDiv').each(function(){
var SisterDivContent = $(this).parent().find('.saDivTwo').html();
alert(SisterDivContent);
});
You have to add some contents inside div class 'saDivTwo'. Otherwise you will get empty content only.
Demo:
http://jsfiddle.net/U8n7g/

Try using .sibling:
$('.paDiv').sibling('paDivTwo').html()

Copy the content of a div into another div

I have two divs on my website. They both share the same css properties, but one of them holds 24 other divs. I want all of these 24 divs to be copied into the other div.
This is how it looks like:
<div id="mydiv1">
<div id="div1">
</div>
</div id="div2>
</div>
//and all the way up to div 24.
</div>
<div id="mydiv2">
</div>
I want all of the 24 divs within mydiv1 to be copied into mydiv2 when the page loads.
Thanks in advance

Firstly we are assigning divs into variables (optional)
var firstDivContent = document.getElementById('mydiv1');
var secondDivContent = document.getElementById('mydiv2');
Now just assign mydiv1's content to mydiv2.
secondDivContent.innerHTML = firstDivContent.innerHTML;
DEMO
http://jsfiddle.net/GCn8j/
COMPLETE CODE
<html>
<head>
<script type="text/javascript">
function copyDiv(){
var firstDivContent = document.getElementById('mydiv1');
var secondDivContent = document.getElementById('mydiv2');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
</script>
</head>
<body onload="copyDiv();">
<div id="mydiv1">
<div id="div1">
</div>
<div id="div2">
</div>
</div>
<div id="mydiv2">
</div>
</body>
</html>

You can use the .ready() event of jquery
jQuery(document).ready(function() {
jQuery('.div1').html(jQuery("#div2").html());
}
Also a working DEMO.

var divs = document.getElementById('mydiv1').innerHTML;
document.getElementById('mydiv2').innerHTML= divs;

Alternative in jquery You can use clone and put it in your target div. Example:
$('#mydiv1').clone().appendTo('#mydiv2');
Copy #mydiv1 into #mydiv2

Try this one in 2022.
let clonedDiv = document.getElementById('myDiv').cloneNode(true);
document.body.appendChild(clonedDiv);

how to get a string contained in a div

I have a div that contains div in HTML code, i just want to retrieve the string contained in that div, like the word LATTE or price:12 in the next code:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
<div id="items">
<div id="heapbox_46958322" class="heapBox">
…
</div>
<select class="basic-example" style="display: none;">
…
</select>
<div id="dummy">
…
</div>
<div id="gallery">
<div class="item_block">
…
</div>
<div class="item_block">
…
</div>
<div class="item_block hasoptions">
price:12
<div class="add_btn">
</div>
<div class="item_name">
LATTE
</div>
</div>
</div>
<div id="order_list">
…
</div>
</div>
<script type="text/javascript">
…
</script>
</body>
Fiddle Here
UPDATE
The answers help me get all the texts in all the divs that called item_Name , but i want it from the div i clicked as i'm using an onlclick event :
$('.item_block').on('click',function(){
// here is the tip
document.getElementsByClassName("add_btn").onclick =
alert($(".item_name").text());
.
.
.

You can use jQuery's .text() function.
Example:
$(".item_name").text();
This will retrieve the text inside all divs with the class item_name.
If you just want the text of the .item_name that you clicked on:
$(".item_name").click(function() {
$(this).text();
});
Demo: http://jsfiddle.net/UFMkQ/1/

Give that div a id
suppose id="getText"
In javascript
var value = document.getElementById('getText').innerText || document.getElementById('getText').textContent;

Try this, this is help to you, In this i just add text to your order_list div for how to add text in div
$('#order_list').html('XYZ');
Fiddle Here

You could use innerHTML attribute of div to get the text inside.
alert(document.getElementById('divid').innerHTML);

innerText on the object should allow you to not only retrieve but also overwrite the text