We Keep Coding

Jquery appendto div class selector

I have the following html
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
<div class="info">Text</div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
</div>
I try jquery to move "info" class, which has the previous class "swatch-option selected", at the end of the closing div class "options"
So my final html should be like
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
<div class="info">Text</div>
</div>
The jquery I tried is the following but it does not move the info class, which has the previous class swatch-option selected
<script>
require([
'jquery'
], function ($) {
$(document).ready(function(){
$('.selected.info').appendTo('.options');
})
})
</script>

$('.selected.info') means to search for an element that has both selected and info classes but they are siblings in your example.
You can use the adjacent sibling selector (+)
$(document).ready(function() {
$('.selected + .info').appendTo('.options');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
<div class="info">Text</div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
</div>

How to add class from multiple div with class "abcd+n" to another div with class "qwer+n"

How to add class from multiple div with class "abcd+n" to another div with class "qwer+n"
for example:
<div class="firstlist">
<a class="firstlistitem-1" ref="#">link1</a>
<a class="firstlistitem-2" ref="#">link2</a>
<a class="firstlistitem-3" ref="#">link3</a>
.........
</div>
and
<div class="secondlist">
<div class="secondlistitem-1">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-2">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-3">
<div class="correct">correct answer</div>
<div class="ad_link">CLICK</div>
</div>
.........
</div>
On click "CLICK" from "secondlistitem-2" add in "firstlistitem-2" class "incorrect" or "correct"

You can try the following way:
$('.secondlist .ad_linkk').click(function(){
var cls = $(this).prev('div').attr('class');
var p = $(this).parent().attr('class').split('-')[1];
$('.firstlist').find(`a[class*=${p}]`).addClass(cls);
});
.incorrect{ color: red }
.correct{ color: green }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="firstlist">
<a class="firstlistitem-1" ref="#">link1</a>
<a class="firstlistitem-2" ref="#">link2</a>
<a class="firstlistitem-3" ref="#">link3</a>
</div>
<div class="secondlist">
<div class="secondlistitem-1">
<div class="incorrect">incorect answer</div>
<div class="ad_linkk">CLICK</div>
</div>
<div class="secondlistitem-2">
<div class="incorrect">incorect answer</div>
<div class="ad_linkk">CLICK</div>
</div>
<div class="secondlistitem-3">
<div class="correct">corect answer</div>
<div class="ad_linkk">CLICK</div>
</div>
</div>

You can find the appropriate class to add to the link by seeing if the clicked link has a sibling with class .correct. If not, the class must be incorrect. You can then use the .index in the second list of the parent of the link to indicate which of the elements in the first list to highlight:
$('.ad_link').on('click', function() {
let cc = $(this).siblings('.correct').length ? 'correct' : 'incorrect';
let index = $(this).parent().index();
$('.firstlist').children().eq(index).addClass(cc);
});
.correct { color : green; }
.incorrect { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="firstlist">
<a class="firstlistitem-1" ref="#">link1</a>
<a class="firstlistitem-2" ref="#">link2</a>
<a class="firstlistitem-3" ref="#">link3</a>
</div>
<div class="secondlist">
<div class="secondlistitem-1">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-2">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-3">
<div class="correct">correct answer</div>
<div class="ad_link">CLICK</div>
</div>
</div>

How to synchronize a div container displaying other elements when active

I have a div containing 3 options that can be active, and when one of them is selected(becomes active) the connector/lines associated with that element should trigger and initiate the animation. So far I have it displayed but can't figure out how to fire the animation every time the first option becomes active, and disable it when it isn't active.
CodePen
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment <small></small></h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Intermediate Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1 active"></span>
<span class="demo__hover demo__hover-2 active"></span>
<span class="demo__hover demo__hover-3 active"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Intermediate Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
document.addEventListener('DOMContentLoaded', function() {
$(document).ready(function() {
$('.demo__hover').on('click', function() {
$that = $(this);
if ($('.demo__hover.active').length > 0) {
$('.active').removeClass('active');
}
$($that).addClass('active');
})
})
});

I strongly suggest to refactor my code but I edited your pin, adding a class that block animation by default:
.block-anim {
animation: none !important;
}
and some dirty JS that deal with it
https://codepen.io/ThomasTognacci/pen/POqRJa

Change innerhtml of each first column in each row

I want to change the innerHTML of each column in each row, but I cant get it to work properly.
var numOfRows = $('.wrap').children('.row').length;
for (var i = 0; i < numOfRows; i++) {
var $firstDiv = $(".input_fields_wrap .row:eq(0)");
$firstDiv.text("Works");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>
How could I properly go about this and change the innerHTML of each column in each row?

You can use something like this, too:
$('.row').each(function(i) {
$(this).children().first().text('changed '+i);
});
Demo: https://jsfiddle.net/c1hcL26m/

Please do like bellow.
$( ".row div:first-child").text("Some text")

You can use :first-child selector
Selects all elements that are the first child of their parent.
To use index, You can use .text(function)/.html(function)
$('.wrap .row .col-md-4:first-child').text(function(i) {
return 'Changed Text: ' + (i+1);
});
$('.wrap .row .col-md-4:first-child').text(function(i) {
return 'Changed Text: ' + (i+1);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>

javascript approach
document.querySelectorAll('.row div:first-child').forEach(function(r){r.innerHTML = "MYchangedtext"})

Try this out
$(".wrap .row .col-md-4:first-child").text("Hello world!");

UPDATE
I now understand OP's request is to change the content of the first column only. Using this selector pattern we are able to accurately target desired elements. The use of .each() allows us to iterate through each target and modify the content and give each one a unique number as well.
var firstCols = $('div > div > div:first-of-type')
This selector is saying:
Find the divs that are the first child div...
...of a div (mom) and that div must...
...have a div parent as well (grandma).
OLD
Each column of each row equates to all cells or with this Bootstrap layout it would mean all div.col-md-4. I noticed the "CHANGE" and "DONT CHANGE" pattern, is that what you really want instead?
$('.col-md-4').html('NEW CONTENT');
SNIPPET
var firstCols = $('div > div > div:first-of-type');
firstCols.each(function(idx, obj) {
$(this).html('ROW' + (idx + 1)).css('background', 'cyan');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>
</body>
</html>

Do a loop on your .row and find the first div and change the text. use the below logic
$(".wrap .row").each(function(i){
$(this).find('div:eq(0)').text("Changed "+ i );
});
Here is a working snippet
$(".wrap .row").each(function(i){
$(this).find('div:eq(0)').text("Changed "+ i );
$(this).find('div:eq(0)').css('background-color','yellow'); //demo purpose
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>

Adding numbers and create a div for the result

I have the following HTML structure (endless) ...
<div class="wrapper">
<div class="content">
<div class="score">1</div>
<div class="score">2.5</div>
<div class="score">1.5</div>
<div class="score">1.5</div>
<div class="score">2</div>
</div>
</div>
... and I want, that the script adding score 1 till 5 for every wrapper. The result of every wrapper should displayed in a new div, called "result". This div should be created by the script too.
It would look like this::
<div class="wrapper">
<div class="content">
<div class="score">1</div>
<div class="score">2.5</div>
<div class="score">1.5</div>
<div class="score">1.5</div>
<div class="score">2</div>
<div class="result">8.5</div> <-- created by script
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="score">2.5</div>
<div class="score">3.5</div>
<div class="score">4</div>
<div class="score">1.5</div>
<div class="score">1</div>
<div class="result">12.5</div> <-- created by script
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="score">4</div>
<div class="score">1.5</div>
<div class="score">2.5</div>
<div class="score">2</div>
<div class="score">1.5</div>
<div class="result">11.5</div> <-- created by script
</div>
</div>
My problems:
a) How can I adding the scores for every wrapper correct, if the class name would be always the same (wrapper, content, score)?
b) How can I create a div with the result for every wrapper automatically?
Can anyone help me?

Iterate over each .content element and then append the sum of the .score elements.
You can achieve this by nesting .each() loops:
Example Here
$('.wrapper .content').each(function () {
var sum = 0;
$(this).find('.score').each(function () {
sum += Number($(this).text(), 10);
});
$(this).append('<div class="result">' + sum + '</div>');
});
$('.wrapper .content').each(function () {
var sum = 0;
$(this).find('.score').each(function () {
sum += Number($(this).text(), 10);
});
$(this).append('<div class="result">' + sum + '</div>');
});
.result {
color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="content">
<div class="score">1</div>
<div class="score">2.5</div>
<div class="score">1.5</div>
<div class="score">1.5</div>
<div class="score">2</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="score">2.5</div>
<div class="score">3.5</div>
<div class="score">4</div>
<div class="score">1.5</div>
<div class="score">1</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="score">4</div>
<div class="score">1.5</div>
<div class="score">2.5</div>
<div class="score">2</div>
<div class="score">1.5</div>
</div>
</div>
Without jQuery:
Example Here
var content = document.querySelectorAll('.wrapper .content');
Array.prototype.forEach.call(content, function (el) {
var score = el.querySelectorAll('.score'),
resultElement = document.createElement('div'),
sum = 0;
Array.prototype.forEach.call(score, function (el) {
sum += Number(el.textContent, 10);
});
resultElement.className += 'result';
resultElement.textContent = sum;
el.appendChild(resultElement);
});

$(document).ready(function(){
$('.content').each(function(){
var total = 0;
$(this).find('> .score').each(function(){
total += parseFloat($(this).text());
});
$(this).append('<div class="result">' + total + '</div>');
});
});
Working Demo

You can use jQuery's DOM each:
var finalVal = 0;
$(function () {
$(".content").each(function () {
finalVal = 0;
$(this).find(".score").each(function () {
finalVal += Number($(this).text());
});
$(this).append('<div class="result">' + finalVal + '</div>');
finalVal = 0;
});
});
.result {background: #99f;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="wrapper">
<div class="content">
<div class="score">1</div>
<div class="score">2.5</div>
<div class="score">1.5</div>
<div class="score">1.5</div>
<div class="score">2</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="score">2.5</div>
<div class="score">3.5</div>
<div class="score">4</div>
<div class="score">1.5</div>
<div class="score">1</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="score">4</div>
<div class="score">1.5</div>
<div class="score">2.5</div>
<div class="score">2</div>
<div class="score">1.5</div>
</div>
</div>