We Keep Coding

I want to add a switch that switches between Monthly prices and Yearly prices

I hope your doing great. I want to add a switch that switches between "Monthly" and "Yearly". When Switched to yearly, I want the price shown to change from 9$ to 6$. I basically want a toggle switch to change text.
<!-- Pricing -->
<div class="v-line v-line-left"> <div class="container">
<div class="pricing-items row">
<div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Essentials </span>
</div>
<div class="icon"></div>
<div class="price">
<span>9</span><span>$</span>
<em>PM</em>
</div>
<br><br>
<label>
<input type="checkbox" name="switch" value="on" onclick="toggleyearmonth()">
<span class="switch"></span>
</label>
<div class="lui-text">
<div>
<p>Get the essentials you need to succeed with our budget-friendly plan. Includes access to our library of study materials, email support from our team of experts, and summaries.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i>Chromebook Tips/Tricks
</li>
<li>
<em>H.W Answers & Explanations</em>
</li>
<li>
<em>Weekly Revision Meetings</em>
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/8wMg1bdvwc9Z9Gg003" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
<div class="pricing-col center col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="label">
<span> Popular </span>
</div>
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Power User </span>
</div>
<div class="icon"></div>
<div class="price">
<em><s>$12</s></em> <span> 8 <b>$</b>
</span>
<em>PM</em>
</div>
<div class="lui-text">
<div>
<p>Take your academic success to the next level with our Power User plan. Includes access to all of H.W answers/expinations, and priority access to our team for one-on-one help.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i>Chromebook Tips/Tricks
</li>
<li>
<i class="fas fa-check"></i>H.W Answers & Explanations
</li>
<li>
<em>Weekly Revision Meetings</em>
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/cN2dT3ezA4Hx7y8bIM" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
<div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Ultimate </span>
</div>
<div class="icon"></div>
<div class="price">
<em><s>$17</s></em><span> 12 <b>$</b>
</span>
<em>PM</em>
</div>
<div class="lui-text">
<div>
<p>Achieve ultimate success with our top-tier plan. Includes access to all of our study materials, priority access to our team for one-on-one help, and exclusive online meetings the day before any test to ensure you're fully prepared.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Exclusive</span> Chromebook Tips/Tricks
</li>
<li>
<i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Preformance Tasks</span> & H.W Answers/Explanations
</li>
<li>
<i class="fas fa-check"></i>Weekly Revision Meetings
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/dR69CN6342zp8Cc8wB" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
</div>
<div class="lui-bgtitle">
<span> Pricing </span>
</div>
</div>
</div>
<div class="container">
<div class="lui-heading">
<div class="container">
<div class="m-titles align-center">
<h2 class="m-title splitting-text-anim-1 scroll-animate" data-splitting="words" data-animate="active">
<br>
<br>
<br>
<span> What are you waiting for? Join now and guarantee your A+ this year! </span>
</h2>
</div>
</div>
</section>
Thank you.
I have tried searching for a solution for hours but got no luck. I even tried chat gpt...

[UPDATED]
If i understand you right you just want to change the price by flipping a switch.
I created one and a basic JS function for it.
Greetings
[UPDATE]
Changed so it appends on all the prices and automatically divides 20% of the price down. Also changed the default "PM" to either PY or PM.
You can edit the switch I inserted as you want.
The only thing important is the function toggleyearmonth();
function toggleyearmonth() {
document.querySelectorAll(".price span").forEach(pricenum => {
if(pricenum.getAttribute("pm")){
if(pricenum.getAttribute("pm") == pricenum.innerText){
pricenum.innerText = (pricenum.getAttribute("pm") - pricenum.getAttribute("pm")/100*20).toFixed(0);
pricenum.parentNode.childNodes[4].innerText = "PY";
} else {
pricenum.innerText = pricenum.getAttribute("pm");
pricenum.parentNode.childNodes[4].innerText = "PM";
}
}
})
};
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+.switch {
display: inline-block;
position: absolute;
width: 60px;
height: 34px;
margin: 0;
padding: 0;
background: #ddd;
border-radius: 20px;
position: relative;
vertical-align: middle;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
input[type="checkbox"]+.switch:before {
content: "";
width: 50px;
height: 50px;
background: #fff;
border-radius: 20px;
position: absolute;
top: -8px;
left: -5px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
input[type="checkbox"]:checked+.switch {
background: #4caf50;
}
input[type="checkbox"]:checked+.switch:before {
left: calc(100% - 30px);
}
<label>
<input type="checkbox" name="switch" value="on" onclick="toggleyearmonth()">
<span class="switch"></span>
</label>
<br><br>
<!-- Pricing -->
<div class="v-line v-line-left">
<div class="container">
<div class="pricing-items row">
<div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Essentials </span>
</div>
<div class="icon"></div>
<div class="price">
<span pm=9>9</span><span>$</span>
<em>PM</em>
</div>
<br><br>
<div class="lui-text">
<div>
<p>Get the essentials you need to succeed with our budget-friendly plan. Includes access to our library of study materials, email support from our team of experts, and summaries.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i>Chromebook Tips/Tricks
</li>
<li>
<em>H.W Answers & Explanations</em>
</li>
<li>
<em>Weekly Revision Meetings</em>
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/8wMg1bdvwc9Z9Gg003" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
<div class="pricing-col center col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="label">
<span> Popular </span>
</div>
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Power User </span>
</div>
<div class="icon"></div>
<div class="price">
<span pm=12>12</span><span>$</span>
<em>PM</em>
</div>
<div class="lui-text">
<div>
<p>Take your academic success to the next level with our Power User plan. Includes access to all of H.W answers/expinations, and priority access to our team for one-on-one help.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i>Chromebook Tips/Tricks
</li>
<li>
<i class="fas fa-check"></i>H.W Answers & Explanations
</li>
<li>
<em>Weekly Revision Meetings</em>
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/cN2dT3ezA4Hx7y8bIM" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
<div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Ultimate </span>
</div>
<div class="icon"></div>
<div class="price">
<span pm=17>17</span><span>$</span>
<em>PM</em>
</div>
<div class="lui-text">
<div>
<p>Achieve ultimate success with our top-tier plan. Includes access to all of our study materials, priority access to our team for one-on-one help, and exclusive online meetings the day before any test to ensure you're fully prepared.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Exclusive</span> Chromebook Tips/Tricks
</li>
<li>
<i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Preformance Tasks</span> & H.W Answers/Explanations
</li>
<li>
<i class="fas fa-check"></i>Weekly Revision Meetings
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/dR69CN6342zp8Cc8wB" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
</div>
<div class="lui-bgtitle">
<span> Pricing </span>
</div>
</div>
</div>
<div class="container">
<div class="lui-heading">
<div class="container">
<div class="m-titles align-center">
<h2 class="m-title splitting-text-anim-1 scroll-animate" data-splitting="words" data-animate="active">
<br>
<br>
<br>
<span> What are you waiting for? Join now and guarantee your A+ this year! </span>
</h2>
</div>
</div>
</section>

Incrementing input value - What am I doing wrong here?

I'm attempting to increment the value of the input with the + / - buttons but can't figure out where my issue is that it is currently not doing anything. Any help is appreciated. I know that jquery now offers spinner functionality in their UI file but in this case it's not a possibility and it's out of my hands.
HTML:
<article class="card card-product-list">
<div class="row no-gutters">
<aside class="col-md-2">
<a href="#" class="img-wrap">
<span class="badge badge-danger"> SOMETHING </span>
<img src="https://image.jpg">
</a>
</aside> <!-- col.// -->
<div class="col-md-7">
<div class="info-main">
<div class="row">
<div class="col-sm-12">
TEST
<div class="rating-wrap mb-3">
TEST
</div> <!-- rating-wrap.// -->
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>AWP:</strong> $84.32
</li>
<li>
<strong>WAC:</strong> $13.04
</li>
<li>
<strong>Manufacturer:</strong> TEST
</li>
<li>
<strong>Brand:</strong> TEST
</li>
</ul>
</div>
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>Lot:</strong> 369125
</li>
<li>
<strong>Expires:</strong> 04/30/21
</li>
</ul>
</div>
</div>
</div> <!-- info-main.// -->
</div> <!-- col.// -->
<aside class="col-sm-3">
<div class="info-aside">
<i class="far fa-heart"></i>
<div class="price-wrap">
<span class="price h5"> $4.50 EA/1 </span>
<p>In Stock</p>
</div> <!-- info-price-detail // -->
<br>
<div class="form-group col-md flex-grow-0">
<div class="input-group mb-3 input-spinner">
<div class="input-group-prepend">
<button class="btn btn-light" type="button" id="button-plus"> + </button>
</div>
<input type="text" class="form-control qty" value="1" id="HotQty[A.PROD.NO]" min="0" max="100" step="1">
<div class="input-group-append">
<button class="btn btn-light" type="button" id="button-minus"> − </button>
</div>
</div>
<span class="text">Add to cart</span> <i class="fas fa-shopping-cart"></i>
</div>
</div> <!-- info-aside.// -->
</aside> <!-- col.// -->
</div> <!-- row.// -->
</article>
JQUERY:
$(document).ready(function() {
var incrementPlus;
var incrementMinus;
var buttonPlus = $("button#button-plus");
var buttonMinus = $("button#button-minus");
var incrementPlus = buttonPlus.click(function() {
var $n = $(this).parent("div.info-aside").find("input.qty");
$n.val(Number( $n.val() ) + 1 );
});
var incrementMinus = buttonMinus.click(function() {
var $n = $(this).parent("div.info-aside").find("input.qty");
var amount = Number($n.val());
if (amount > 0) {
$n.val(amount - 1);
}
});
});

parent() method traverses to the immediate parent of the elements.
Instead of parent() you should use parents() or closest():
$(document).ready(function() {
var incrementPlus;
var incrementMinus;
var buttonPlus = $("button#button-plus");
var buttonMinus = $("button#button-minus");
buttonPlus.click(function() {
var $n = $(this).parents("div.info-aside").find("input.qty");
$n.val(Number( $n.val() ) + 1 );
});
buttonMinus.click(function() {
var $n = $(this).parents("div.info-aside").find("input.qty");
var amount = Number($n.val());
if (amount > 0) {
$n.val(amount - 1);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="card card-product-list">
<div class="row no-gutters">
<aside class="col-md-2">
<a href="#" class="img-wrap">
<span class="badge badge-danger"> SOMETHING </span>
<img src="https://image.jpg">
</a>
</aside> <!-- col.// -->
<div class="col-md-7">
<div class="info-main">
<div class="row">
<div class="col-sm-12">
TEST
<div class="rating-wrap mb-3">
TEST
</div> <!-- rating-wrap.// -->
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>AWP:</strong> $84.32
</li>
<li>
<strong>WAC:</strong> $13.04
</li>
<li>
<strong>Manufacturer:</strong> TEST
</li>
<li>
<strong>Brand:</strong> TEST
</li>
</ul>
</div>
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>Lot:</strong> 369125
</li>
<li>
<strong>Expires:</strong> 04/30/21
</li>
</ul>
</div>
</div>
</div> <!-- info-main.// -->
</div> <!-- col.// -->
<aside class="col-sm-3">
<div class="info-aside">
<i class="far fa-heart"></i>
<div class="price-wrap">
<span class="price h5"> $4.50 EA/1 </span>
<p>In Stock</p>
</div> <!-- info-price-detail // -->
<br>
<div class="form-group col-md flex-grow-0">
<div class="input-group mb-3 input-spinner">
<div class="input-group-prepend">
<button class="btn btn-light" type="button" id="button-plus"> + </button>
</div>
<input type="text" class="form-control qty" value="1" id="HotQty[A.PROD.NO]" min="0" max="100" step="1">
<div class="input-group-append">
<button class="btn btn-light" type="button" id="button-minus"> − </button>
</div>
</div>
<span class="text">Add to cart</span> <i class="fas fa-shopping-cart"></i>
</div>
</div> <!-- info-aside.// -->
</aside> <!-- col.// -->
</div> <!-- row.// -->
</article>

wpbakery Accordion tab auto open when clicking the anchor link

I'm new to this section. I'm using a wordpress homepage and use wpbakery for creating my content.
My specific problem is that I have an accordion but cannot open it automatically.
That's what I did: created an accordion with different tabs. I wanna use a link like test.com\accordion#tab2 open the side and automatically the right tab2 of the accordion. Anyone know the code of JS I could use to solve this?
<div class="wpb_column vc_main_column vc_column_container vc_col-sm-12 typo-default">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="vc_tta-container" data-vc-action="collapse">
<div class="vc_general vc_tta vc_tta-tabs vc_tta-color-grey vc_tta-style-classic vc_tta-shape-rounded vc_tta-spacing-1 vc_tta-tabs-position-top vc_tta-controls-align-left">
<div class="vc_tta-tabs-container">
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab vc_active" data-vc-tab="">
<a href="#tabid1" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 1</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#tabid2" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 2</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#tabid3" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 3</span>
</a>
</li>
</ul>
</div>
<div class="vc_tta-panels-container">
<div class="vc_tta-panels">
<div class="vc_tta-panel vc_active" id="tabid1" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid1" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 1</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text1</p>
</div>
</div>
</div>
</div>
<div class="vc_tta-panel" id="tabid2" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid2" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 2</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text2</p>
</div>
</div>
</div>
</div>
<div class="vc_tta-panel" id="tabid3" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid3" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 3</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="height: 0px;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text3</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Error with ui-sref

I am getting an error for the first ui-sref inside div with class="row episode-link" although the rest work correctly:
Syntax Error: Token '}' not a primary expression at column 12 of the expression [{seriesId: }] starting at [}].
The same ui-sref if put anywhere in the rest of the html structure works perfectly.
Unable to track the bug. Please Help.
<section>
<div class="container-fluid">
<div class="row episode-link">
<a ui-sref="app.episode({seriesId: {{show._id}}})">
<div class="col-md-12 guide">
<span class="fa fa-chevron-right" style="float: right;"></span>
<h5>Episode Guide</h5>
<p>{{episodes.length}} episodes</p>
</div>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="seriesjumbo jumbotron">
<div class="row">
<div class="col-md-4 show-img-div align-items-center">
<img class="show-img" src="{{show.poster}}" alt="{{show.seriesName}}">
</div>
<div class="col-md-8">
<h1>{{show.seriesName}}</h1>
<p class="episode-info"><i class="fa fa-calendar" aria-hidden="true"></i><span>{{show.firstAired | date: 'mm/dd/yyyy'}}</span></p>
<p class="info">{{show.network}} <span class="rating"><i class="fa fa-star fa-lg star" aria-hidden="true"></i> {{show.rating}}</span></p>
<p class="info"><em>{{show.airsDayOfWeek}}s, {{show.airsTime}} GMT </em></p>
<div class="cap">
<span class="label label-default" ng-repeat="genre in show.genre">{{genre}}</span>
</div>
<div class="menus"><span class="fa fa-list"></span></div>
<div class="menus"><span class="fa fa-heart"></span></div>
<div class="bookmark"><span class="fa fa-bookmark"></span></div>
<div class="menus"><span class="fa fa-star"></span></div>
<div>
<h3>Overview </h3>
<p>{{show.overview}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<uib-tabset active="active">
<uib-tab index="0" heading="Episodes">
<div class="row">
<div class="col-md-6">
<h5>Seasons</h5>
<ul class="season-list">
<li ng-repeat="season in seasons | orderBy: '-valueOf()'"><a ui-sref="app.episode({seriesId: {{show._id}}, season: {{season}}})">{{season}}</a></li>
</ul>
</div>
<div class="col-md-6">
<h5>Years</h5>
<ul class="season-list">
<li ng-repeat="year in firstAired | orderBy:'-toString()'"><a ui-sref="app.episode({seriesId: {{show._id}}, year: {{year}}})">{{year}}</a></li>
</ul>
</div>
</div>
</uib-tab>
<uib-tab index="1" heading="Fan Arts">
<div ui-view="fan_arts"></div>
</uib-tab>
</div>
</div>
</div>
</section>

Change background color with nth child selector

I tried using nth child selector but it did not work. maybe the way I wrong or something
<ul>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
example: https://jsfiddle.net/03koh1w4/

You need to make a few changes (HTML and CSS)
HTML -> Don´t close your order list on all item
CSS -> Give your (odd and even) to your list, and then to your class
CSS
.link-source {
display:inline;
color:#fff;
}
li:nth-child(odd) .link-source {
background: green;
}
li:nth-child(even) .link-source {
background: red;
}
HTML
<ul>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
</ul>
DEMO HERE