Develop Reference

Get text content of all parent divs

I have dropdown list with some file names.
What I want to achieve is to find file name parents so when checkbox is checked I can get their respective values and build them into path of some sort. For example you are clicking
updates > second_folder_updates > CSD_update checkbox
on that CSD_update checbox click you can see updates/second_folder_updates/CSD_update being console logged, same goes for first update on click you will get updates/first_update in the console
my current solution it works in a way? but this returns a lot of duplicates and incorrect data
var elem = document.getElementById("AQW_update");
function getParents(elem) {
var parents = [];
while(elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'body') {
elem = elem.parentNode;
parents.push(elem.textContent);
}
return parents;
}
var abc = getParents(elem)
for(var i = 0; i < abc.length; ++i)
abc[i] = abc[i].replace(/(\r\n|\n|\r)/gm,"")
console.log(abc.toString())
$(document).ready(function () {
$('.clickFaq').click(function () {
$('.displayDir').toggle('1000');
$("i", this).toggleClass("icon-up-circled icon-down-circled");
var $data = $('.SWCheckBox:checked').val();
console.log($data)
});
$(".open").hide();
$('.dirTitle').click(function () {
$(this).next().slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
first_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
second_folder_updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
AQW_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox" >
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
CSD_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>

Is there any way to shorten this code? Currently its working fine

This is my code. is there any other way?
$("._nf-short-ans").on("click", function(){
$(".nf-short-desc").removeClass("nf-hide");
$(".nf-main-c").addClass("nf-hide");
$(".nf-btn-opt").addClass("nf-hide");
$(".nf-para-c").addClass("nf-hide");
$(".nf-date-c").addClass("nf-hide");
$(".nf-time-c").addClass("nf-hide");
$(".nf-other-c").addClass("nf-hide");
});
$("._nf-para").on("click", function(){
$(".nf-para-c").removeClass("nf-hide");
$(".nf-main-c").addClass("nf-hide");
$(".nf-btn-opt").addClass("nf-hide");
$(".nf-short-desc").addClass("nf-hide");
$(".nf-date-c").addClass("nf-hide");
$(".nf-time-c").addClass("nf-hide");
$(".nf-other-c").addClass("nf-hide");
});
$("._nf-date").on("click", function(){
$(".nf-date-c").removeClass("nf-hide");
$(".nf-main-c").addClass("nf-hide");
$(".nf-btn-opt").addClass("nf-hide");
$(".nf-short-desc").addClass("nf-hide");
$(".nf-time-c").addClass("nf-hide");
$(".nf-para-c").addClass("nf-hide");
$(".nf-other-c").addClass("nf-hide");
});
$("._nf-time").on("click", function(){
$(".nf-time-c").removeClass("nf-hide");
$(".nf-main-c").addClass("nf-hide");
$(".nf-btn-opt").addClass("nf-hide");
$(".nf-short-desc").addClass("nf-hide");
$(".nf-para-c").addClass("nf-hide");
$(".nf-date-c").addClass("nf-hide");
$(".nf-other-c").addClass("nf-hide");
});
$("._nf-multi-choice, ._nf-checkbox").on("click", function(){
$(".nf-para-c").addClass("nf-hide");
$(".nf-main-c").removeClass("nf-hide");
$(".nf-other-c").removeClass("nf-hide");
$(".nf-btn-opt").removeClass("nf-hide");
$(".nf-short-desc").addClass("nf-hide");
$(".nf-date-c").addClass("nf-hide");
$(".nf-time-c").addClass("nf-hide");
});
.nf-hide {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row margin-top-10 data-c">
<div class="col col-12 child-centered nf-main-c nf-hide" id="nf_1">
<div class="rdo-wrapper fullwidth" id="opt_1">
<input id="rdo8" type="radio" name="sample4" class="rdo">
<label class="lbl-rdo fullwidth noah-forms-lbl nf-opt-lbl" for="rdo8">
<div class="col col-12">
<div class="nf-opt-c">
<div class="nf-input-opt">
<input type="text" name="" class="txtbox noah-forms-textbox nf-opt" value="Option 1">
<span></span>
</div>
<div class="nf-aImage-c">
<div class="nf-opt-icon _nf-aImage-opt"></div>
</div>
<div class="nf-close-c">
<div class="nf-opt-icon _nf-close-opt"></div>
</div>
</div>
</div>
</label>
</div>
</div>
<div class="col col-12 margin-top-10 nf-short-desc">
<div class="nf-short-desc-c">
<input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text">
<span></span>
</div>
</div>
<div class="col col-12 margin-top-10 nf-para-c nf-hide">
<div class="nf-para-input">
<input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text">
<span></span>
</div>
</div>
<div class="col col-12 margin-top-10 nf-date-c nf-hide">
<div class="nf-date-input">
<input type="date" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text">
<span></span>
</div>
</div>
<div class="col col-12 margin-top-10 nf-time-c nf-hide">
<div class="nf-time-input">
<input type="time" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text">
<span></span>
</div>
</div>
</div>
<div class="nf-dropdown">
<div class="nf-select-c">
<div class="nf-default-opt">
<div class="nf-li">
<div class="nf-opt" data-value="nf-multi">
<div class="nf-icon _nf-icon-chk"></div>
<div class="nf-p">Multiple Choice</div>
</div>
</div>
</div>
<div class="nf-opt-ul">
<div class="nf-li">
<div class="nf-opt _nf-short-ans" data-value="nf-short-ans">
<div class="nf-icon _nf-icon-s-ans"></div>
<div class="nf-p">Short Answer</div>
</div>
</div>
<div class="nf-li">
<div class="nf-opt _nf-para" data-value="nf-para">
<div class="nf-icon _nf-icon-para"></div>
<div class="nf-p">Paragraph</div>
</div>
</div>
<hr>
<div class="nf-li">
<div class="nf-opt _nf-multi-choice" data-value="nf-multi">
<div class="nf-icon _nf-icon-mchoice"></div>
<div class="nf-p">Multiple Choice</div>
</div>
</div>
<div class="nf-li">
<div class="nf-opt _nf-checkbox" data-value="nf-check">
<div class="nf-icon _nf-icon-checkbox"></div>
<div class="nf-p">CheckBoxes</div>
</div>
</div>
<hr>
<div class="nf-li">
<div class="nf-opt _nf-date" data-value="nf-date">
<div class="nf-icon _nf-icon-date"></div>
<div class="nf-p">Date</div>
</div>
</div>
<div class="nf-li">
<div class="nf-opt _nf-time" data-value="nf-time">
<div class="nf-icon _nf-icon-time"></div>
<div class="nf-p">Time</div>
</div>
</div>
</div>
</div>
</div>
The code works just fine. However, I'm thinking if there is a way to shorten this kind of jQuery code.

Rather than giving the containers a unique class, such as .nf-date-c, you can give them all a common class, like .nf-container, then use that as the selector. Since you're already storing which container the option relates to in it's data-value, you can use that to select the corresponding container.
<div class="col col-12 margin-top-10 nf-date nf-container">
$('.nf-opt').on('click', function(){
$('.nf-container').addClass('nf-hide'); //hide everything
$('.nf-container.' + this.getAttribute('data-value'))
.removeClass('nf-hide'); //unhide the clicked option
});

If you put the toggleable elements (that get shown or hidden) in order, you can iterate over the clickable .nf-lis and use the clicked index to identify which toggleable section to show, and hide the rest.
Your toggleable sections are already in order except for the .nf-main-c - all you need to do in the HTML is move that to the end so it comes last with the .data-c > div selector.
const toggleableDivs = $('.data-c > div');
$('.nf-li').each(function(i) {
$(this).on('click', () => {
toggleableDivs.addClass('nf-hide');
toggleableDivs.eq(i).removeClass('nf-hide');
});
});
.nf-hide {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row margin-top-10 data-c">
<div class="col col-12 margin-top-10 nf-short-desc">
<div class="nf-short-desc-c">
<input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text">
<span></span>
</div>
</div>
<div class="col col-12 margin-top-10 nf-para-c nf-hide">
<div class="nf-para-input">
<input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text">
<span></span>
</div>
</div>
<div class="col col-12 margin-top-10 nf-date-c nf-hide">
<div class="nf-date-input">
<input type="date" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text">
<span></span>
</div>
</div>
<div class="col col-12 margin-top-10 nf-time-c nf-hide">
<div class="nf-time-input">
<input type="time" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text">
<span></span>
</div>
</div>
<div class="col col-12 child-centered nf-main-c nf-hide" id="nf_1">
<div class="rdo-wrapper fullwidth" id="opt_1">
<input id="rdo8" type="radio" name="sample4" class="rdo">
<label class="lbl-rdo fullwidth noah-forms-lbl nf-opt-lbl" for="rdo8">
<div class="col col-12">
<div class="nf-opt-c">
<div class="nf-input-opt">
<input type="text" name="" class="txtbox noah-forms-textbox nf-opt" value="Option 1">
<span></span>
</div>
<div class="nf-aImage-c">
<div class="nf-opt-icon _nf-aImage-opt"></div>
</div>
<div class="nf-close-c">
<div class="nf-opt-icon _nf-close-opt"></div>
</div>
</div>
</div>
</label>
</div>
</div>
</div>
<div class="nf-dropdown">
<div class="nf-select-c">
<div class="nf-default-opt">
<div class="nf-li">
<div class="nf-opt" data-value="nf-multi">
<div class="nf-icon _nf-icon-chk"></div>
<div class="nf-p">Multiple Choice</div>
</div>
</div>
</div>
<div class="nf-opt-ul">
<div class="nf-li">
<div class="nf-opt _nf-short-ans" data-value="nf-short-ans">
<div class="nf-icon _nf-icon-s-ans"></div>
<div class="nf-p">Short Answer</div>
</div>
</div>
<div class="nf-li">
<div class="nf-opt _nf-para" data-value="nf-para">
<div class="nf-icon _nf-icon-para"></div>
<div class="nf-p">Paragraph</div>
</div>
</div>
<hr>
<div class="nf-li">
<div class="nf-opt _nf-multi-choice" data-value="nf-multi">
<div class="nf-icon _nf-icon-mchoice"></div>
<div class="nf-p">Multiple Choice</div>
</div>
</div>
<div class="nf-li">
<div class="nf-opt _nf-checkbox" data-value="nf-check">
<div class="nf-icon _nf-icon-checkbox"></div>
<div class="nf-p">CheckBoxes</div>
</div>
</div>
<hr>
<div class="nf-li">
<div class="nf-opt _nf-date" data-value="nf-date">
<div class="nf-icon _nf-icon-date"></div>
<div class="nf-p">Date</div>
</div>
</div>
<div class="nf-li">
<div class="nf-opt _nf-time" data-value="nf-time">
<div class="nf-icon _nf-icon-time"></div>
<div class="nf-p">Time</div>
</div>
</div>
</div>
</div>
</div>

Multiple div shown on the add button click how to delete the same div through the delete button

var count = 2;
var countMax = 5;
function adddt() {
if (count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'block';
count++;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btn1" onclick="adddt()"><i class="fa fa-plus"></i></button> </div>
<div class="row" id="dt-1" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-2" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-3" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
I am using the above code to show multiple divs one by one by clicking on the 'add' button. Now I want to hide the same divs when I click on the delete or minus button. Requesting you please guide how can I solve this. I tried using the show hide method but it would not work for me. Thanks in advance.

you can do like this
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btn1" onclick="adddt()"><i class="fa fa-plus"></i></button> </div>
<div class="row" id="dt-1" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(1)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-2" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(2)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-3" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(3)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
</body>
<script>
var count = 1;
var countMax = 3;
function adddt() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'block';
count++;
}
function deletdt(id)
{
document.getElementById('dt-' + id + '').style.display = 'none';
}
</script>
</html>

function delete() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'none';
count++;
}
if you change value to "display: none;" instead of "display: block;" it will work.

The JS code fails to execute (or do anything) when I click the submit button

I'm just learning Javascript, and this is my first attempt to make something for myself, so forgive me if the solution is very simple. I'm trying to automate score keeping for a card game. When I click the submit button, nothing happens.
<div class="container body-content">
<div class="row mt-4 justify-content-center">
<div class="col-auto">
<img class="img-fluid logo" alt="cards" src="img/cards.png">
</div>
<div class="col-4">
<h1>Shayne's Golf Tally</h1>
</div>
</div>
<div class="row justify-content-center text-center round">
<div class="col">
<h2 id="round">Round: 0</h2>
</div>
</div>
<div class="row justify-content-center text-center mt-3">
<div class="col-3">
<h3 class="names">Shayne</h3>
<h3 id="shayne">0</h3>
</div>
<div class="col-3">
<h3 class="names">Amber</h3>
<h3 id="amber">0</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputShayne">
</div>
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputAmber">
</div>
</div>
<div class="row justify-content-center text-center mt-4">
<div class="col">
<button class="btn btn-primary" onclick="tallyScore()">Submit</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="golf.js"></script>
And the javascript:
var round = 0;
var scoreShayne = 0;
var scoreAmber = 0;
function tallyScore() {
round += 1;
document.getElementById(round).innerHTML = "Round: " + round;
scoreShayne += document.getElementById("inputShayne").value;
scoreAmber += document.getElementById("inputAmber").value;
document.getElementById(shayne).innerHTML = scoreShayne;
document.getElementById(amber).innerHTML = scoreAmber;
}

some recommandations in this code, just to see ;)
// global values
var round = 0
, scoreShayne = 0
, scoreAmber = 0
;
// use constants to prevent the JS interpreter from recalculating each call
const hmi_round = document.getElementById('round')
, hmi_shayne = document.getElementById('shayne')
, hmi_amber = document.getElementById('amber')
, hmi_inputShayne = document.getElementById('inputShayne')
, hmi_inputAmber = document.getElementById('inputAmber')
;
function tallyScore()
{
hmi_round.textContent = "Round: " + ++round; // ++round is a direct increment (different from round++ )
hmi_shayne.textContent = scoreShayne += hmi_inputShayne.valueAsNumber; // HTML5 as valueAsNumber
hmi_amber.textContent = scoreAmber += hmi_inputAmber.valueAsNumber; // instead of parseInt(hmi_inputAmber.value)
hmi_inputShayne.value = "0"; // reset values for the next round
hmi_inputAmber.value = "0";
}
<div class="container body-content">
<div class="row mt-4 justify-content-center">
<div class="col-auto">
<img class="img-fluid logo" alt="cards" src="img/cards.png">
</div>
<div class="col-4">
<h1>Shayne's Golf Tally</h1>
</div>
</div>
<div class="row justify-content-center text-center round">
<div class="col">
<h2 id="round">Round: 0</h2>
</div>
</div>
<div class="row justify-content-center text-center mt-3">
<div class="col-3">
<h3 class="names">Shayne</h3>
<h3 id="shayne">0</h3>
</div>
<div class="col-3">
<h3 class="names">Amber</h3>
<h3 id="amber">0</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputShayne" type="number"min="0" value="0"> <!-- don't forget to set the type -->
</div>
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputAmber" type="number" min="0" value="0"> <!-- don't forget to set the type -->
</div>
</div>
<div class="row justify-content-center text-center mt-4">
<div class="col">
<button class="btn btn-primary" onclick="tallyScore()">Submit</button>
</div>
</div>
</div>

Get text of label sibling of checked checked using javascript

I want to be able to check if the input is checked and if it is checked then grab the data associated with that input and display it into another div. here is my code.
var levels = $('input:checked + label').map(function() {
return $(this).text();
}).get();
//alert(levels);
document.getElementById('listprice').innerHTML = levels;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this -->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11">
<span class="errors-area" data-class="sln-alert sln-alert-medium sln-alert--problem">
<div class="sln-alert sln-alert-medium sln-alert--problem" style="display: none" id="availabilityerror">
Not enough time for this service
</div>
</span>
</div>
</div>
</div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>
I would like to collect the data and show it back in a div somewhere else on the page. Any jquery to help achieve this would be great.

$(document).ready(function(){
var checkedItems = $('input[type=checkbox]:checked');
checkedItems.each(function(){
var serviceName = $(this).parents('.sln-service-info').find('.sln-service-name').html();
var servicePrice = $(this).parents('.sln-service-info').find('.sln-service-price').html();
$('#listprice').append('<div>Title - '+serviceName +' Price - ' +servicePrice +'</div>');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" checked name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this-->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>