Develop Reference

here to insert element using jQuery

I want to insert a div inside the div having id = newDiv when the <button class="songBtn btn"><i class="fa fa-play fa-lg playbtn"></i></button> is clicked. How can I do this with jQuery? I'm using after() but it only inserts the div after the button.
actually, I want to do this dynamically as there could be multiple sections like this
here is my HTML code
<div class="row border-bottom g-3 player-song-detail">
<div class="col-md-1 col-2 my-auto text-center">
<!-- play button -->
<button class="songBtn btn"><i class="fa fa-play fa-lg playbtn"></i></button>
<input type="text" value="Song Title" placeholder="write song title here" hidden>
</div>
<div class="col-md-4 col-8 my-auto" id="newDiv">
<!-- div should be inserted here -->
</div>
</div>
here is my jQuery code
$(".songBtn").click(function(){
$( this ).after( "<div>Test Div</div>" );
});

use append instead of after
$(".songBtn").click(function(){
$( "#newDiv" ).append( "<div>Test Div</div>" );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row border-bottom g-3 player-song-detail">
<div class="col-md-1 col-2 my-auto text-center">
<!-- play button -->
<button class="songBtn btn"><i class="fa fa-play fa-lg playbtn"></i>btn</button>
<input type="text" value="Song Title" placeholder="write song title here" hidden>
</div>
<div class="col-md-4 col-8 my-auto" id="newDiv">
<!-- div should be inserted here -->
</div>
</div>

$('.songBtn').click(function(){
$('#newDiv').append('<div></div>');
})
#newDiv{
border:1px solid red;
}
#newDiv div{
background:orange;
border:1px solid red;
width:10px;height:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newDiv">This is div with ID newDiv</div>
<button class="songBtn btn">this is the button</button>

How do I add new row of data with javascript?

I'm creating add file function for my user, in this function, user have to insert their file name, choose their file then click on the Add Document button.
once user have add the document it will display back the user document under the add document button. User can add more as many as document they want.
I have trouble in adding the data. The file keep getting missing when user try to attach new file.
I want to display all file list of the user before the submitting it.
first add document
then user wants to add another document, the first document get replaced
second document
how do I make it not to overwrite the older document when user add more document ?
<div class="col-md-12 mb-3">
<textarea class="form-control" id="name" ></textarea>
</div>
<div class="col-md-12 mb-3">
<button type="button" class="btn btn-success w-100 choseDoc">Select document</button>
<input type="file" id="file" hidden>
</div>
<div class="col-md-12 mb-3">
<button type="button" class="btn btn-info w-100" onclick="myFunction()">Add Document</button>
</div>
<div>
<p id = "demo"></p>
</div>
<script>
function myFunction() {
let filename= $('#name').val();
let doc = $('#file').val();
let fileData = '';
fileData += `<div class="tab-content col-12 mt-4" id="myTabContent-2">
<div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
<div class="col-md-12">
<ul class="perfomer-lists m-0 p-0" id="">
<li class="d-flex mb-4 align-items-center">
<img class="avatar-20 rounded ml-2" src="assets\avatar.png" style="width: 50px;">
<div class="media-support-info ml-3">
<a class="font-size-12 font-weight-600"><b>${filename}</b></a>
<p class="mb-0 font-size-12"> ${doc}</p>
</div>
</li>
</ul>
</div>
</div>
</div> `;
document.getElementById("demo").innerHTML = fileData;

Besides the fact that your approach brings some pitifals in performance you have a little logical mistake
<div class="col-md-12 mb-3">
<textarea class="form-control" id="name" ></textarea>
</div>
<div class="col-md-12 mb-3">
<button type="button" class="btn btn-success w-100 choseDoc">Select document</button>
<input type="file" id="file" hidden>
</div>
<div class="col-md-12 mb-3">
<button type="button" class="btn btn-info w-100" onclick="myFunction()">Add Document</button>
</div>
<div>
<p id = "demo"></p>
</div>
<script>
let fileData = ''; // <--- must be declared outside your function to keep the state
function myFunction() {
let filename= $('#name').val();
let doc = $('#file').val();
fileData += `<div class="tab-content col-12 mt-4" id="myTabContent-2">
<div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
<div class="col-md-12">
<ul class="perfomer-lists m-0 p-0" id="">
<li class="d-flex mb-4 align-items-center">
<img class="avatar-20 rounded ml-2" src="assets\avatar.png" style="width: 50px;">
<div class="media-support-info ml-3">
<a class="font-size-12 font-weight-600"><b>${filename}</b></a>
<p class="mb-0 font-size-12"> ${doc}</p>
</div>
</li>
</ul>
</div>
</div>
</div> `;
document.getElementById("demo").innerHTML = fileData;

Using jQuery to apply function on a specific Div generated by EJS

I have coded a series of bootstrap collapsible Divs using the Javascript forEach function in an EJS file. These divs all have a button to expand and collapse the div. Initially, pressing on any button will expand all divs but I have managed to overcome that by indexing the IDs of those divs.
My problem now is I have a separate JS file running jQuery. The jQuery is used to hide and show specific font-awesome icons. When the div is collapsed, it shows an arrow-down icon and hides the arrow-up icon. When a div is expanded, it shows an arrow-up icon and hides the arrow-down icon. My jQuery when activated will apply the changes to all divs but I only want to apply it to the div that I clicked. I briefly recall I could use $(this) but haven't been able to find anything that could help me with it.
Please see my JS and EJS files below.
list.js
$('#collapsibleDivBtn').on('click', () => {
var downHiddenStatus = $(".fa-caret-square-down").is("[hidden]")
var upHiddenStatus=$(".fa-caret-square-up").is("[hidden]")
$(".fa-caret-square-down").toggleClass('hidden')
$(".fa-caret-square-down").attr('hidden',!downHiddenStatus)
$(".fa-caret-square-up").toggleClass('hidden')
$(".fa-caret-square-up").attr('hidden',!upHiddenStatus)
});
list.ejs
<!-- Start of the page -->
<div class="container mt-3">
<!-- Title of the page -->
<h3>List of Racks</h3>
<% data.forEach((rack, index) => { %>
<div class="card mb-3" >
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5 class="card-title"><strong><%= rack['Cabinet ID'] %></strong></h5>
</div>
<div>
<a id="collapsibleDivBtn" href="#collapsibleDiv<%= index %>" class="btn p-0" data-toggle="collapse">
<i class="far fa-caret-square-down text-primary bg-white"></i>
<i hidden class="hidden far fa-caret-square-up text-danger bg-white"></i>
</a>
</div>
</div>
<h6 class="card-subtitle mb-2 text-muted"><%= rack['Abbreviated Address'] %></h6>
<hr>
<div id="collapsibleDiv<%= index %>" class="collapse">
<div class="row mb-2">
<div class="col">
<p class="card-text">User Status: <br />
<span id="siteStatus" class="statusUpdate" ><%= rack['User Status'] %>
</span>
</p>
</div>
<div class="col">
<p class="card-text">Site Status: <br />
<span id="userStatus" class="statusUpdate">Online
</span>
</p>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<p class="mb-0">After Service Status: <br />
<span id="aft_service_status" class="statusUpdate">Unknown
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<% }); %>
</div>

No need for hiding elements. Just use CSS rotate for your icons.
$(".container").on("click", function(){
$(this).find("i").toggleClass("arrowUp");
});
.container{
width: 50px;
height: 50px;
font-size: 50px;
}
.container i{
transition: all 0.4s ease;
}
.arrowUp {
transform: rotateZ(-180deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div>
<a class="container">
<i class="fa fa-arrow-down"></i>
</a>
<a class="container">
<i class="fa fa-arrow-down"></i>
</a>
<a class="container">
<i class="fa fa-arrow-down"></i>
</a>
</div>

javascript scrollIntoView function does not work inside my global event listener

I'm using scrollIntoView to scroll after creating form dynamically with javascript. Using the same way on chrome console works fine but when used inside my event method it does nothing. can you help me why?
html form to copy
<div id="comment_form_template">
<div class="row shadow mx-1 my-2 border rounded border-secondary bg-light">
<div class="container-fluid">
<div class="row p-1 bg-info rounded-top" id="comment_form_title_color">
<h6 class="my-auto text-white font-weight-bold "><small>comment</small></h6>
</div>
<div class="row">
<form action="#" method="POST" class="col-12 mt-1 px-1">
{% csrf_token %}
{{ comment_form.comment | append_attr:"class:col-12" | attr:"style:font-size:12px; height:85px; resize:none;" }}
<button type="submit" class="mb-1 float-right btn btn-info btn-sm px-1 py-0">
<small>submit comment</small>
</button>
</form>
</div>
</div>
</div>
</div>
javascript
window.onload = () => {
var form_template = document.getElementById('comment_form_template');
var test = form_template.cloneNode(true);
test_form = test.querySelector("#comment_form_title_color")
test_form.setAttribute("class", "row p-1 bg-warning rounded-top");
test_form.firstElementChild.setAttribute("class", "my-auto text-dark font-weight-bold ")
document.addEventListener("click", (e) => {
var t = e.target.id.split("_")[1]
if (e.target.id.split("_")[0] === "node" ) {
var target_div = document.getElementById(`hiddenInput_${t}`)
var target_div_isForm = target_div.getAttribute("data-isForm")
if (target_div_isForm === "False"){
target_div.innerHTML = test.innerHTML
target_div.setAttribute("data-isForm", "True")
} else if (target_div_isForm === "True"){
target_div.innerHTML = ""
target_div.setAttribute("data-isForm", "False")
}
}
e.target.scrollIntoView()
// target_div.scrollIntoView() doesn't work as well
})
};
element which i want my screen to move
<div id="hiddenInput_{{node.pk}}" data-isForm="False"></div>
element that i click to make a form
<div class="row d-inline-flex float-right mr-1">
<small class="ml-2 text-dark"><strong>subComment</strong></small>
</div>
by the way the form creates fine but the problem is that after creating the form screen scrolls up to top of the page

How to select data from DIV's with something like $this?

given the following code snippet:
<div class="container-fluid" id="networdapp">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
How can I read data from a random div/unknown position in for div? I can't use PHP.
This <div ... id="networdapp"> is created depending on the results from a database. How can I get the data {{result.title}} from a random div when I click the "Details" button from it?
I tried to get it using JQuery but I ended up by selecting all data from all DIVs. Then I was thinking if I can do that with $this and I tried but still can't do it.
EDIT: There is the generated html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">WebSite for testing</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarWw1" aria-controls="navbarWw1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarWw1">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="myInput" type="search" onkeyup="myFunction()" placeholder="Find your next memories!">
</form>
</div>
</nav>
<div class="container-fluid" id="networdapp" style="display:none;">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light" >
<div class="card-header text-center" > {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
<a href="/details" class="btn btn-info" >Details</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function myFunction() {
var input , filter , OK = false ;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
if(filter.length > 0 ) {
document.getElementById("networdapp").style.display = "";
$( ".col-sm-6" ).each(function( index ) {
if ($(this).text().toUpperCase().indexOf(filter) > -1){
this.style.display="";
}else{
this.style.display="none";
//document.getElementById("networdapp").style.display = "none";
}
});
}
else{
document.getElementById("networdapp").style.display = "none";
}
}
</script>
<script type="text/javascript">
const vm = new Vue({
el: '#networdapp',
data: {
results:[]
},
mounted() {
axios.get('/getJson')
.then(response => {
this.results = response.data;
})
.catch( e => {
console.log(e);
});
}
});
</script>
</html>

The div has the class card-header, so...
$('.card-header').text()
//or
document.getElementsByClassName('card-header')[0].innerText
//or
document.querySelector('.card-header').innerText
//or
document.querySelectorAll('.card-header')[0].innerText
However, you want to get the one related to the button clicked. So that could look something like...
//create a delegate event handler on the container for all the buttons
$('#networdapp').on('click', '.btn.btn-info', function (e) {
//prevent the link so the runnable snippet stops jumping back to the top
e.preventDefault();
//find the parent div with the card class that is the parent to both
//the link and the title
var $card = $(this).closest('.card');
//find the nested card header in the card clicked
var $cardHeader = $card.find('.card-header');
//console log the text
console.log($cardHeader.text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 1 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 2 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 3 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>

Using jQuery:
$("#networdapp .card-header.text-center").html()
So:
$(".btn.btn-info").click(function(){
console.log( $("#networdapp .card-header.text-center").html() );
})
Or:
$(".btn.btn-info").click(function(){
console.log( $(this).closest("#networdapp").find(".card-header.text-center").html() );
})

You can select div then use the context to select the button r other elements within.
$(".card").each(function(){
var that = this; // <--- the current div
var header = $(that).find(".card-header");
var detailBtn = $(that).find(".btn-info");
// set event handlers here
// Example:
detailBtn.click(function(){
alert(header.text());
});
});
Here is a working Example

Using jquery
$(this).parents("#networdapp").find(".card-header.text-center").text();
To remove unneccesay spaces you can use trim
$.trim($(this).parents("#networdapp").find(".card-header.text-center").text());