We Keep Coding

Get data-value from element in another file with jQuery

So basically I have some elements with some data-values in a file . I want to dynamically create links to them using those data-values to type the text, href etc.
For example, I have two divs, id'ed firstand second. They have importance values, respectively "most important" and "least important".
I want to create two links to them, with the phrase "This is a link to the most/least important div" using JavaScript/jQuery. Below is a non-working example.
File a.html (ommiting headings and such, ofc):
<div id='first' data-importance='most important'>This is the first div.</div>
<div id='second' data-importance='least important'>This is the second div.</div>
File b.html:
<p><a class='makelink' data-linkto='first'></a></p>
<p><a class='makelink' data-linkto='second'></a></p>
$(`.makelink`).each( function(){
var target = $(this).data('linkto');
$(this).attr('href','b.html#' + target);
var imp = $('b.html #' + target).data('importance');
$(this).html('Link to the ' + imp + ' div');
});
However nothing happens. Any help is appreciated.

Your code seems correct except the selector should be inside quote and the string generated in the html() is not properly formatted:
$('.makelink').each( function(){ // Enclosed the selector with single/double qoute
var target = $(this).data('linkto');
$(this).attr('href','#' + target);
var imp = $('#' + target).data('importance');
$(this).html('Link to the '+ imp + ' div'); // concatenate the string with the variable using +
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='first' data-importance='most important'>This is the first div.</div>
<div id='second' data-importance='least important'>This is the second div.</div>
<p><a class='makelink' data-linkto='first'></a></p>
<p><a class='makelink' data-linkto='second'></a></p>

How do i make jQuery unique ID for div for click event?

I need on selection to append div element to the another div, I have done it, and also every time when I select new selection, it should append new div.
the problem is, those appended div's have same id, so I can not delete particular element. I have made them unique with declaring var and combining id with a string, like : id="add_marke'+selectedKey+'" BUT I cant do something like this jQuery( "#add_marke'+selectedKey+'" ).click(function() {
How can I select ID when I make unique ID?
var selectedKey = jQuery("#model").val();
jQuery('#example').append('' + '<div class="add_marke" id="add_marke' +
selectedKey + '" >' +
' <div class="car_tag"><span class="lbl"><span id="car_name" class="icon-remove"></span></div> ' +
'&nbsp' +
' <select name="model_cars" id="model_cars" ><option id="selectModel" name="selectModel" value="all" >Please select </option><option>test</option></select>' +
'&nbsp' + '</div>');
jQuery("#car_name").click(function() {
jQuery("#add_marke\\.selectedKey").remove();
});

You can add the IDs as you do with a predefined prefix:
... id="add_marke_' + selectedKey + '" ...
And then bind the click with a jQuery selector for all elements that have the ID starting with add_marke_:
$('div[id^="add_marke_"]').click()

What you need to do is add the click handler to the class name shared by all of these divs. Once the click handler has been triggered, you can then extract the relevant id of the element and compose a selector from that id.
jQuery( ".class_name" ).click(function() {
var id = jQuery( this ).attr( "id" );
jQuery( "#" + id ).remove();
});

You can use
jQuery( ".icon-remove" ).click(function() {
jQuery(this).parent().parent().parent().remove();
});

Since an ID must be unique you have one of two options, as I see it:
Appending some sort of counter or numeric identifier to the ID, so you always have a unique ID (e.g., count the number of elements and then attribute your ID as my-id-1, my-id-2, etc.) Here you would have to write the DOM query in such a way that searches only for those IDs which begin with a given pattern, div[id^="my-id-"]
Use a class to identify the object in terms of any interactions you would like to provide for all of these <div> elements which have the same structure. Here, you can query based on a common class, in your case .add_marke.

<div class="parentElement">
<span>jagadeesh</span>
<span class="icon-remove car-remove"></span>
<button >Remove</button>
</div>
$('.car-remove').on('click',function(){
var mainElement = $(this).closest('.parentElement')
/// do what ever you want with main element. it selects only current parent
//element
mainElement.remove();
})

Did you want to do something like this?
http://jsfiddle.net/Wg9FE/1/
var selectedKey = "someId";
jQuery('#example').append('' +
'<div class="add_marke" id="add_marke'+selectedKey+'" >' +
' <div class="car_tag"><span class="lbl"><div id="car_name" class="icon-remove"></div></div> ' + '&nbsp' +
' <select name="model_cars" id="model_cars" ><option id="selectModel" name="selectModel" value="all" >Please select </option><option>test</option></select>'+ '&nbsp' +
'</div>');
jQuery( "#car_name" ).click(function() {
jQuery( "#add_marke" + selectedKey ).remove();
});

find elements > get attribute > append to cousin

<div class="links">
<ul>
<li class="pdf"></li>
<li class="weiter">more</li>
</ul>
</div>
For each LI.weiter, I want to grab the link add sth and append it as PDF-Link:
var LinkMarkup = '<a href="';
$('.weiter A').each(function() {
LinkMarkup += $(this).attr('href') + '&type=999" target="_blank">PDF</a>';
$(this).closest('.pdf').append($(LinkMarkup));
});
Thanks a lot!

Close, the anchor is a child of the li, to you can use find. The .pdf is actually a sibling, but is also the previous element, so use .prev. You also need to build the actual a element and append:
$('.weiter').each(function() {
var href = $(this).find("a").attr('href') + "&type=999",
link = "<a href='" + href + "' target=_blank>PDF</a>";
$(this).prev('.pdf').append(link);
});

How To merge two divs to one div

I have two divs
<div id = "first">some details111</div>
and
<div id = "second">some details222</div>
I want to create:
<div id ="New">some details111 some details222</div>
What is the best and the fast way to do it?

Using jQuery you could do that:
$(document).ready(function(){
$("body").append("<div id='New'></div>");
$("#New").text($("#first").text() + " " +$("#second").text());
});

Some vanilla JS for kicks and giggles:
// grab the content from our two divs
var content1 = document.getElementById('one').innerHTML;
var content2 = document.getElementById('two').innerHTML;
// create our new div, pop the content in it, and give it an id
var combined = document.createElement('div');
combined.innerHTML = content1 + " " + content2; // a little spacing
combined.id = 'new';
// 'container' can be whatever your containing element is
document.getElementById('container').appendChild(combined);

Try the below :
Fiddle Example : http://jsfiddle.net/RYh7U/99/
If you already have a DIV with ID "NEW" then try like below:
$('#New').html($('#first').html() + " " + $('#second').html())
If you want to Create a div and then add the Content then try like below.
$("body").append("<div id ='New'></div>")
$('#New').html($('#first').html() + " " + $('#second').html())

Well, using jQuery you can do by this way:
$("body").append(
$('<div/>')
.attr("id","New")
.html(
$("#first).html() + $("#second").html()
)
);

$("<div></div>").attr("id", "New").html($("#first").html() + $("#second").html()).appendTo($("body"));

How to access an element that is placed next to it?

I have following html structure:
<span class="thump">1</span>
<a class="tp" href="#" programm="5">Post</a>
Now I want to write thump according to programm attribute. This is how I get the the a element according to the programm number:
$("a.tp[programm='" + programm + "']");
How do I refer to the thump element that is next to this a element?

var anchor = $("a.tp[programm='" + programm + "']");
var thump = anchor.prev();
Or if there is only one thump element (previous is recommended, especially if they are adjacent elements):
var anchor = $("a.tp[programm='" + programm + "']");
var thump = anchor.siblings('.thump');