We Keep Coding

setAttribute also also setting the value for the following element

I'm pretty sure this one is silly but I can't seem to figure it out myself.
This is a Django website containing a little bit of Javascript.
In my HTML, I have a button that should send a few values to a Javascript function. The javascript function should then find and update some divs in the HTML.
The strange thing is that the value assigned to the setAttribute statement is automatically also used for the following innerHTML statement (overruling whatever was configured there).
HTML Button:
<button class="btn btn-outline-dark" onclick="monthStats(
{{simple_total_monthly_sent_volume}},
{{average_monthly_delivery_rate}},
{{average_monthly_unique_open_rate}},
{{total_monthly_unique_open_volume}},
{{average_monthly_unique_click_rate}},
{{average_monthly_rejection_rate}},
)">Month</button>
Javascript:
function monthStats (sentvolume,
deliveryrate,
uniqueopenrate,
uniqueopenvolume,
uniqueclickrate,
rejectionrate
) {
document.getElementById("sent").innerHTML = (sentvolume).toLocaleString("en-US");
document.getElementById("delivered").innerHTML = deliveryrate+"%";
document.getElementById("uniqueopened").innerHTML = uniqueopenrate+"%";
document.getElementById("uniqueopened").setAttribute("title", uniqueopenvolume.toString());
document.getElementById("uniqueclicked").innerHTML = uniqueclickrate+"%";
document.getElementById("rejected").innerHTML = rejectionrate+"%";
}
HTML divs that should get updated:
<div class="container">
<div class="row">
<div class="col">
<div id="sent" class="keymetric">{{simple_total_monthly_sent_volume|intcomma}}</div><div class="text-muted keymetricexplanation">sent volume</div>
</div>
<div class="col">
<div id="delivered" class="keymetric">{{average_monthly_delivery_rate}}%</div><div class="text-muted keymetricexplanation">delivery rate</div>
</div>
<div class="col">
<div id="uniqueopened" class="keymetric" data-bs-toggle="tooltip" data-bs-placement="top" title="{{total_monthly_unique_open_volume|intcomma}}">{{average_monthly_unique_open_rate}}%</div><div class="text-muted keymetricexplanation">unique open rate</div>
</div>
<div class="col">
<div id="uniqueclicked" class="keymetric">{{average_monthly_unique_click_rate}}%</div><div class="text-muted keymetricexplanation">unique click rate</div>
</div>
<div class="col">
<div id="rejected" class="keymetric">{{average_monthly_rejection_rate}}%</div><div class="text-muted keymetricexplanation">rejection rate</div>
</div>
</div>
</div>
Clicking on the Month button in the HTML results in the title and textvalue of the div with ID "uniqueopened" to be updated correctly by the Javascript. However, the setAttribute statement in the javascript is seemingly also updating the value of the following div with ID "uniqueclicked", overruling the Javascript statement targeting that div.

I'm still not sure what caused the original problem. But could solve my issue by using an alternative approach: instead of pushing all the values to one single javascript function, I created a separate javascript function that does only the setAttribute updates.

jquery add class to closest parent

I have a form, and some the fields are set inside 3 groups of collapsible divs, I wan't after the validation that if any field has errors the parent div receive a class to unfold it.
<div class="panel-group" id="fields_panel">
<div class="panel panel-primary">
<div id="basic_info_fields" class="panel-collapse collapse in"> <!-- add class "in" -->>
<div class="panel-body">
<div class="row clearfix">
<div class="col-md-12 m-b-0">
<div class="form-group">
<div class="form-line error"> <!-- if this div has "error" -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have two more panels with the same structure, eacho one with a couple of fields, I'm trying to find if any form-line has error and append to the panel-collapse parent the class in to unfold it.
Right now I have the following jquery code:
$(function () {
var elem = $('.panel').find('.form-line');
if (elem.hasClass('error')) {
elem.closest('.panel-collapse').addClass('in');
};
});
But it apply the in class to all panel-collapse.
What should I do to apply it only to the top level parent that have a child element with that class, and not to all parents?

Your hasClass won't work as elem is an array of jQuery objects - not just one.
Why do you need it - why not just include the class in your selector:
$('.panel').find('.form-line.error').closest('.panel-collapse').addClass('in');
This also stops you looping through elements in the array that doesn't have the class thus improving efficiency

Use following code:
$('.panel').find('.form-line.error').each(function(){
$(this).closest('.panel-collapse').addClass('in');
});
$(this) refers to the specified element which has the error class.

jQuery DataTables append div to specific place

I have code:
<div class="addButton col-lg-6">
<button type="button" class="btn btn-primary" data-toggle="modal">BTN</button>
</div>
<div class="table-responsive">
<div id="PositionDataTable2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div id="PositionDataTable2_processing" class="dataTables_processing" style="display: none;">Processing...</div>
// place where <div class="addButton"> should appear
<div id="PositionDataTable2_filter" class="dataTables_filter"></div>
<div class="dataTables_paginate paging_simple_numbers" id="PositionDataTable2_paginate"></div>
</div>
</div>
I want to take first div, which has addButton class and put into div PositionDataTable2 and place it between the processing and filter parts. But append and prepend only does it inside div start or end.
Also it would be great, if someone would suggest how to place it correctly and make a copy or so that my button wouldn't disappear on datatable fndestroy and recreate.

You could try using the $.after() insert like:
$(".dataTables_processing").after($(".addButton").html());

Jquerys insertAfter() should work.
Try something like this:
$('div.addButton').insertAfter('div#PositionDataTable2_wrapper');
EDIT: If you don't want that the first addButton disappears you could use .clone()
$('div.addButton').clone().insertAfter('div#PositionDataTable2_wrapper');

just one of the ng-bind-html in page work

I write angularjs application and have this block of code but just first html-bind-html works for me
<div ng-bind-html='newsTitle'>
<div ng-bind-html='newsDetail'></div>
</div>
When i change the priority like this :
<div ng-bind-html='newsDetail'>
<div ng-bind-html='newsTitle'></div>
</div>
It shows newsDetail value.
How many ng-bind-html per page can i declare? why second value doesn't show?

I guess I understand your problem.
<div ng-bind-html='newsTitle'> <!-- This will replace the content of the div with $scope.newsTitle -->
<div ng-bind-html='newsDetail'> <!-- So this won't appear, because it has been removed by ng-bind-html='newsTitle' -->
</div>
</div>
Look my comments in the code. So if you put newsDetails in the first place, the binded HTML ($scope.newsDetail) will replace the current content aswell.
In a word, ng-bind-html replace the current content of your element with the binded HTML you provide. So you shouldn't put HTML in those elements.
You just have to do something like this :
<div class="news">
<div ng-bind-html='newsTitle'></div>
<div ng-bind-html='newsDetail'></div>
</div>
Some docs about ngBindHtml directive : https://docs.angularjs.org/api/ng/directive/ngBindHtml

If it's real copy of your html. Then I suppose that it's problem with structure. Please close your block:
<div> </div>

You can try and write it like this
<div><span ng-bind-html='newsTitle'></span></div>
<div><span ng-bind-html='newsDetail'></span></div>

Put element inside an element, which is not the parent (JQuery UI sortable)

I've created a test page, where inside each blocks the divs are sortable. But how is it possible, to let the user drag the div out of it's parent, and put inside an another sortable div?
JSFiddle: http://jsfiddle.net/zq8bqufs/
Code:
$( ".sortable, body" ).sortable();

You can use the items option to determine which items inside the element should be sortable.
JSFIDDLE
HTML
<div class="sortable">
<div class="items">
<div class="items">asd</div>
<div class="items">eee</div>
<div class="items">fff</div>
</div>
<div class="items">asd</div>
<div class="items">
<div class="items">vvv</div>
<div class="items">abbsd</div>
<div class="items">mmm</div>
</div>
<div class="items">dsa</div>
</div>
Javascript
$('.sortable').sortable({
items: '.items'
});

You need to use connectWith, more about that here.
I updated (and simplified) your fiddle with that functionality here: http://jsfiddle.net/vrx6r264/