We Keep Coding

Item selected from dropdown-item not opening on first click?

There is a dropdown menu like this.
function changeRange(range) {
var options = {
data.......
};
var options1 = {
data.......
};
var options2 = {
data.......
};
if (range === 'last30') {
var chart = new ApexCharts(
document.querySelector("#revenue"),
options
);
} else if (range === 'month') {
var chart = new ApexCharts(
document.querySelector("#revenue"),
options1
);
} else if (range === 'partner30') {
var chart = new ApexCharts(
document.querySelector("#revenue"),
options2
);
} else if (range === 'partnermonth') {
var chart = new ApexCharts(
document.querySelector("#revenue"),
options3
);
}
chart.render();
}
<div class="widget widget-chart-one">
<div class="widget-heading">
<h5 class="">Total Coins</h5>
<div class="task-action">
<div class="dropdown">
<a class="dropdown-toggle" href="#" role="button" id="pendingTask" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="pendingTask" style="will-change: transform;">
<button class="dropdown-item" onclick="changeRange('last30')" value="last30">Mobile 30 Day</button>
<button class="dropdown-item" onclick="changeRange('month')" value="month">Mobile Monthly</button>
<button class="dropdown-item" onclick="changeRange('partner30')" value="partner30">Partner 30 Day</button>
<button class="dropdown-item" onclick="changeRange('partnermonth')" value="partnermonth">Partner Monthly</button>
</div>
</div>
</div>
</div>
<div class="widget-content">
<div id="revenue"></div>
</div>
</div>
My question is: When I choose an option from the Dropdown menu, it does not load on the first click. For example, I have the "Mobile 30 days" graphic on my page, and I want to switch to the "Mobile Monthly" option. When I click on the "Mobile Monthly" option, the page refreshes, but the graphic does not change. When I click the same again, the graphic I want opens this time. I even explain the photo I put below. It tries and fails to open a chart below the previous chart on the first click, updates the chart on the second click. I think conditional statements cause the problem. What do you think?
At the first click, it tries to open the graphic I want here. Then, for 1 or 2 seconds, it comes and goes. On the second click, it now replaces the top graphic with what I want.
Also, I get the following error: Cannot read properties of undefined (reading 'filter')

You creatin new chart every time function executes, instead try updating it. You can do it without referencing the instance of the chart with exec. https://apexcharts.com/docs/methods/#exec
ApexCharts.exec('mychart', 'updateOptions', options);
But first you need to add id to your options
chart:{
id: 'mychart',
...
}

How to have pre-selected option while construction of dropdown in mdc

i wanted to select a particular option while construction of dropdown.
Question: i want to select grapes while construction of dropdown. not after construction.
Note: i want to construct it at once(while appending). don't want to select after construction.
$(function(){
var listOptions = ['apple','banana','grapes']
var optionsStr = '';
for(var i = 0; i < listOptions.length; i++){
var selectedClass = '',ariaValue = '', value = '';
value = listOptions[i];
if(value == 'grapes') selectedClass = 'mdc-list-item--selected',ariaValue = 'aria-selected="true"';
optionsStr += `<li class="mdc-list-item ${selectedClass}" ${ariaValue} data-value="" role="option">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">
${listOptions[i]}
</span>
</li>`
}
$('#foods_items').html(optionsStr);
mdc.select.MDCSelect.attachTo(document.querySelector('.mdc-select'));
});
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mdc-select mdc-select--filled demo-width-class">
<div class="mdc-select__anchor"
role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-labelledby="demo-label demo-selected-text">
<span class="mdc-select__ripple"></span>
<span id="demo-label" class="mdc-floating-label">Pick a Food Group</span>
<span class="mdc-select__selected-text-container">
<span id="demo-selected-text" class="mdc-select__selected-text">sss</span>
</span>
<span class="mdc-select__dropdown-icon">
<svg
class="mdc-select__dropdown-icon-graphic"
viewBox="7 10 10 5" focusable="false">
<polygon
class="mdc-select__dropdown-icon-inactive"
stroke="none"
fill-rule="evenodd"
points="7 10 12 15 17 10">
</polygon>
<polygon
class="mdc-select__dropdown-icon-active"
stroke="none"
fill-rule="evenodd"
points="7 15 12 10 17 15">
</polygon>
</svg>
</span>
<span class="mdc-line-ripple"></span>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
<ul class="mdc-list" role="listbox" aria-label="Food picker listbox" id="foods_items">
</ul>
</div>
</div>
Please help me thanks in advance!!

WordPress: Display a fallback thumbnail if post doesn't have a featured image

I'm working on local WordPress, theme: Twenty Twenty.
I'm trying to get it so that if the article does not have a feature image, then it uses one sourced elsewhere, but no matter what I try it doesn't work. It either displays no image at all, or this.
Obviously, I don't want the sourced image on the ones that do have a featured image uploaded.
Here is what I have so far:
<?php
/**
* Displays the featured image
*
* #package WordPress
* #subpackage Twenty_Twenty
* #since Twenty Twenty 1.0
*/
// if has feature image
if ( has_post_thumbnail() && ! post_password_required() ) {
$featured_media_inner_classes = '';
// Make the featured media thinner on archive pages.
if ( ! is_singular() ) {
$featured_media_inner_classes .= ' medium';
}
?>
<figure class="featured-media">
<div class="featured-media-inner section-inner<?php echo $featured_media_inner_classes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>">
<?php
the_post_thumbnail();
$caption = get_the_post_thumbnail_caption();
if ( $caption ) {
?>
<figcaption class="wp-caption-text"><?php echo wp_kses_post( $caption ); ?></figcaption>
<?php
}
?>
<!-- .featured-media -->
<?php
}
// no feature image
else {
echo '<img src="https://st4.depositphotos.com/17828278/24401/v/600/depositphotos_244011872-stock-illustration-image-vector-symbol-missing-available.jpg" alt=""/>';
}
edited WITH image
</header><!-- .archive-header -->
<div class="grid" id="container grid">
<div class="entry-header-inner section-inner medium">
<div class="portfolio-header box-row">
<h1 class="entry-title heading-size-1">Such Is My Fortune</h2></div>
<div class="feature-img box-row">
<figure class="featured-media">
<div class="featured-media-inner section-inner medium">
<img width="800" height="440" src="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass-800x440.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" data-attachment-id="11" data-permalink="http://localhost:8888/wordpress/deaths-hourglass/" data-orig-file="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass.jpg" data-orig-size="944,1303" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Death’s Hourglass" data-image-description="" data-medium-file="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass-217x300.jpg" data-large-file="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass-742x1024.jpg" /></div><!-- .featured-media-inner -->
</figure>
</div>
<div class="post-meta box-row">
<div class="post-meta-wrapper post-meta-single post-meta-single-top">
<ul class="post-meta">
<li class="post-author meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post author</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20"><path fill="" d="M18,19 C18,19.5522847 17.5522847,20 17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,15.3431458 14.6568542,14 13,14 L5,14 C3.34314575,14 2,15.3431458 2,17 L2,19 C2,19.5522847 1.55228475,20 1,20 C0.44771525,20 0,19.5522847 0,19 L0,17 C0,14.2385763 2.23857625,12 5,12 L13,12 C15.7614237,12 18,14.2385763 18,17 L18,19 Z M9,10 C6.23857625,10 4,7.76142375 4,5 C4,2.23857625 6.23857625,0 9,0 C11.7614237,0 14,2.23857625 14,5 C14,7.76142375 11.7614237,10 9,10 Z M9,8 C10.6568542,8 12,6.65685425 12,5 C12,3.34314575 10.6568542,2 9,2 C7.34314575,2 6,3.34314575 6,5 C6,6.65685425 7.34314575,8 9,8 Z" /></svg> </span>
<span class="meta-text">
By seabear211 </span>
</li>
<li class="post-date meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post date</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19"><path fill="" d="M4.60069444,4.09375 L3.25,4.09375 C2.47334957,4.09375 1.84375,4.72334957 1.84375,5.5 L1.84375,7.26736111 L16.15625,7.26736111 L16.15625,5.5 C16.15625,4.72334957 15.5266504,4.09375 14.75,4.09375 L13.3993056,4.09375 L13.3993056,4.55555556 C13.3993056,5.02154581 13.0215458,5.39930556 12.5555556,5.39930556 C12.0895653,5.39930556 11.7118056,5.02154581 11.7118056,4.55555556 L11.7118056,4.09375 L6.28819444,4.09375 L6.28819444,4.55555556 C6.28819444,5.02154581 5.9104347,5.39930556 5.44444444,5.39930556 C4.97845419,5.39930556 4.60069444,5.02154581 4.60069444,4.55555556 L4.60069444,4.09375 Z M6.28819444,2.40625 L11.7118056,2.40625 L11.7118056,1 C11.7118056,0.534009742 12.0895653,0.15625 12.5555556,0.15625 C13.0215458,0.15625 13.3993056,0.534009742 13.3993056,1 L13.3993056,2.40625 L14.75,2.40625 C16.4586309,2.40625 17.84375,3.79136906 17.84375,5.5 L17.84375,15.875 C17.84375,17.5836309 16.4586309,18.96875 14.75,18.96875 L3.25,18.96875 C1.54136906,18.96875 0.15625,17.5836309 0.15625,15.875 L0.15625,5.5 C0.15625,3.79136906 1.54136906,2.40625 3.25,2.40625 L4.60069444,2.40625 L4.60069444,1 C4.60069444,0.534009742 4.97845419,0.15625 5.44444444,0.15625 C5.9104347,0.15625 6.28819444,0.534009742 6.28819444,1 L6.28819444,2.40625 Z M1.84375,8.95486111 L1.84375,15.875 C1.84375,16.6516504 2.47334957,17.28125 3.25,17.28125 L14.75,17.28125 C15.5266504,17.28125 16.15625,16.6516504 16.15625,15.875 L16.15625,8.95486111 L1.84375,8.95486111 Z" /></svg> </span>
<span class="meta-text">
October 19, 2020
</span>
</li>
<li class="post-comment-link meta-wrapper">
<span class="meta-icon">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"><path d="M9.43016863,13.2235931 C9.58624731,13.094699 9.7823475,13.0241935 9.98476849,13.0241935 L15.0564516,13.0241935 C15.8581553,13.0241935 16.5080645,12.3742843 16.5080645,11.5725806 L16.5080645,3.44354839 C16.5080645,2.64184472 15.8581553,1.99193548 15.0564516,1.99193548 L3.44354839,1.99193548 C2.64184472,1.99193548 1.99193548,2.64184472 1.99193548,3.44354839 L1.99193548,11.5725806 C1.99193548,12.3742843 2.64184472,13.0241935 3.44354839,13.0241935 L5.76612903,13.0241935 C6.24715123,13.0241935 6.63709677,13.4141391 6.63709677,13.8951613 L6.63709677,15.5301903 L9.43016863,13.2235931 Z M3.44354839,14.766129 C1.67980032,14.766129 0.25,13.3363287 0.25,11.5725806 L0.25,3.44354839 C0.25,1.67980032 1.67980032,0.25 3.44354839,0.25 L15.0564516,0.25 C16.8201997,0.25 18.25,1.67980032 18.25,3.44354839 L18.25,11.5725806 C18.25,13.3363287 16.8201997,14.766129 15.0564516,14.766129 L10.2979143,14.766129 L6.32072889,18.0506004 C5.75274472,18.5196577 4.89516129,18.1156602 4.89516129,17.3790323 L4.89516129,14.766129 L3.44354839,14.766129 Z" /></svg> </span>
<span class="meta-text">
No Comments<span class="screen-reader-text"> on Such Is My Fortune</span> </span>
</li>
</ul><!-- .post-meta -->
</div><!-- .post-meta-wrapper -->
<div class="post-inner thin ">
<div class="entry-content">
<div class="portfolio-filter box-row">
<span class='type'><p> Type: Poetry </p></span>
<span class='genre'><p> </p></span>
</div>
without image
<div class ="box archive-container">
<div class="grid2">
<div class="entry-header-inner section-inner medium">
<div class="portfolio-header box-row">
<h1 class="entry-title heading-size-1">Vance</h2></div>
<div class="feature-img box-row">
<figure class="featured-media">
<div class="featured-media-inner section-inner medium">
</div><!-- .featured-media-inner -->
</figure>
</div>
<div class="post-meta box-row">
<div class="post-meta-wrapper post-meta-single post-meta-single-top">
<ul class="post-meta">
<li class="post-author meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post author</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20"><path fill="" d="M18,19 C18,19.5522847 17.5522847,20 17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,15.3431458 14.6568542,14 13,14 L5,14 C3.34314575,14 2,15.3431458 2,17 L2,19 C2,19.5522847 1.55228475,20 1,20 C0.44771525,20 0,19.5522847 0,19 L0,17 C0,14.2385763 2.23857625,12 5,12 L13,12 C15.7614237,12 18,14.2385763 18,17 L18,19 Z M9,10 C6.23857625,10 4,7.76142375 4,5 C4,2.23857625 6.23857625,0 9,0 C11.7614237,0 14,2.23857625 14,5 C14,7.76142375 11.7614237,10 9,10 Z M9,8 C10.6568542,8 12,6.65685425 12,5 C12,3.34314575 10.6568542,2 9,2 C7.34314575,2 6,3.34314575 6,5 C6,6.65685425 7.34314575,8 9,8 Z" /></svg> </span>
<span class="meta-text">
By seabear211 </span>
</li>
<li class="post-date meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post date</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19"><path fill="" d="M4.60069444,4.09375 L3.25,4.09375 C2.47334957,4.09375 1.84375,4.72334957 1.84375,5.5 L1.84375,7.26736111 L16.15625,7.26736111 L16.15625,5.5 C16.15625,4.72334957 15.5266504,4.09375 14.75,4.09375 L13.3993056,4.09375 L13.3993056,4.55555556 C13.3993056,5.02154581 13.0215458,5.39930556 12.5555556,5.39930556 C12.0895653,5.39930556 11.7118056,5.02154581 11.7118056,4.55555556 L11.7118056,4.09375 L6.28819444,4.09375 L6.28819444,4.55555556 C6.28819444,5.02154581 5.9104347,5.39930556 5.44444444,5.39930556 C4.97845419,5.39930556 4.60069444,5.02154581 4.60069444,4.55555556 L4.60069444,4.09375 Z M6.28819444,2.40625 L11.7118056,2.40625 L11.7118056,1 C11.7118056,0.534009742 12.0895653,0.15625 12.5555556,0.15625 C13.0215458,0.15625 13.3993056,0.534009742 13.3993056,1 L13.3993056,2.40625 L14.75,2.40625 C16.4586309,2.40625 17.84375,3.79136906 17.84375,5.5 L17.84375,15.875 C17.84375,17.5836309 16.4586309,18.96875 14.75,18.96875 L3.25,18.96875 C1.54136906,18.96875 0.15625,17.5836309 0.15625,15.875 L0.15625,5.5 C0.15625,3.79136906 1.54136906,2.40625 3.25,2.40625 L4.60069444,2.40625 L4.60069444,1 C4.60069444,0.534009742 4.97845419,0.15625 5.44444444,0.15625 C5.9104347,0.15625 6.28819444,0.534009742 6.28819444,1 L6.28819444,2.40625 Z M1.84375,8.95486111 L1.84375,15.875 C1.84375,16.6516504 2.47334957,17.28125 3.25,17.28125 L14.75,17.28125 C15.5266504,17.28125 16.15625,16.6516504 16.15625,15.875 L16.15625,8.95486111 L1.84375,8.95486111 Z" /></svg> </span>
<span class="meta-text">
October 14, 2020
</span>
</li>
<li class="post-comment-link meta-wrapper">
<span class="meta-icon">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"><path d="M9.43016863,13.2235931 C9.58624731,13.094699 9.7823475,13.0241935 9.98476849,13.0241935 L15.0564516,13.0241935 C15.8581553,13.0241935 16.5080645,12.3742843 16.5080645,11.5725806 L16.5080645,3.44354839 C16.5080645,2.64184472 15.8581553,1.99193548 15.0564516,1.99193548 L3.44354839,1.99193548 C2.64184472,1.99193548 1.99193548,2.64184472 1.99193548,3.44354839 L1.99193548,11.5725806 C1.99193548,12.3742843 2.64184472,13.0241935 3.44354839,13.0241935 L5.76612903,13.0241935 C6.24715123,13.0241935 6.63709677,13.4141391 6.63709677,13.8951613 L6.63709677,15.5301903 L9.43016863,13.2235931 Z M3.44354839,14.766129 C1.67980032,14.766129 0.25,13.3363287 0.25,11.5725806 L0.25,3.44354839 C0.25,1.67980032 1.67980032,0.25 3.44354839,0.25 L15.0564516,0.25 C16.8201997,0.25 18.25,1.67980032 18.25,3.44354839 L18.25,11.5725806 C18.25,13.3363287 16.8201997,14.766129 15.0564516,14.766129 L10.2979143,14.766129 L6.32072889,18.0506004 C5.75274472,18.5196577 4.89516129,18.1156602 4.89516129,17.3790323 L4.89516129,14.766129 L3.44354839,14.766129 Z" /></svg> </span>
<span class="meta-text">
No Comments<span class="screen-reader-text"> on Vance</span> </span>
</li>
</ul><!-- .post-meta -->
</div><!-- .post-meta-wrapper -->
<div class="post-inner thin ">
<div class="entry-content">
<div class="portfolio-filter box-row">
<span class='type'><p> Type: Novel </p></span>
<span class='genre'><p>Genres: Adult Themes ❦ Dark Fantasy </p></span>
</div>

Vue: Show/Hide image based on its own src attribute

Is there a way to reference the current element in a vue template? I tried using this but that doesn't seem to work.
Basically I only want to show the img tag if the source attribute has a length greater than zero which changes from the selection of the bootstrap dropdown that it is within.
<img id="active_item_icon" v-show="this.src.length > 0 || !!data.icon_url" :src="data.icon_url" alt="Item Icon">
Full Code:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" style="width:100%;text-align:left;" type="button" id="dropdown-item-icon-url" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<!-- This is the image that I want to watch -->
<img id="active_item_icon" v-show="this.src.length > 0 || !!data.icon_url" :src="data.icon_url" alt="Item Icon">
<span v-show="!data.icon_url">No Icon Selected</span>
</button>
<ul class="dropdown-menu" style="width:100%" aria-labelledby="dropdown-item-icon-url">
<li v-on:click="updateURL" v-for="item in $store.state.icons" :key="item.id">
<img :src="$store.getters.icon(item.id)" alt="">
</li>
</ul>
<input type="hidden" name="icon_url" id="item_icon_url" :value="data.icon_url || ''">
</div>

If you can access data.icon_url for the img tags source and it is a string, you could do a v-if on that, and remove the or.
<img id="active_item_icon" v-show="data.icon_url.length > 0" :src="data.icon_url" alt="Item Icon">

Not sure why I didn't think of this, but I just need to bind it to some data:
export default {
data: () => ({
showUrl: ''
}),
methods: {
updateURL(e) {
this.showUrl = e.currentTarget.querySelector('img').src
},
}
}
<img id="active_item_icon" v-show="!!showUrl.length" :src="showUrl" alt="Item Icon">

jquery animate not working while creating gallery slider

I am creating a slider image gallery using jquery.
Here is the code when I click on right arrow.
var v=1;
$(".r").click(function(){
aa=1150;
var aa=aa*v;
if(x1>1){
$(".d1").animate({right: aa.toString()+"px"});
l=l+1;
v=v+1;
x1=x1-1;
v1=v1-1;
}
and here is the code when I click left arrow
var v1=1;
$(".l").click(function(){
var aa=1150;
aa=aa*v1;
if(l>1)
{
$(".d1").animate({left: aa.toString()+"px"});
x1=x1+1;
l=l-1;
v1=v1+1;
v=v-1;
}
And I am initiation some used in the above code variables like this
var l=1;
var x1=18/6;
the problem is when I click right arrow, it scrolls to the right. then when I click on left arrow, it scrolls to the left. But when I click on right arrow, the following line is not working
$(".d1").animate({right: aa.toString()+"px"});
following is my html for slider,
<div class="d1">
<ul>
<li >
<a href="#">
<img style="width=100px;height:70px" src="Toyota/1.jpg"/>
<span style="width:100px;height:100px;font-size:small;">This is a new toyota1<span><br>
<span style="width:100px;height:100px;font-size:small;">&nbsp$9,000</span>
</a>
</li>
<li >
<a href="#">
<img style="width=100px;height:70px" src="Toyota/1.jpg"/>
<span style="width:100px;height:100px;font-size:x-small;">This is a new toyota2<span>
</a>
</li>
...
Update Here is the demo
http://profileone.net/slider.html

I think all is ok you need to redefine your animate method properties that how your html look after clicking both those button
$(document).ready(function(){
var l=1; var x1=18/6;
var v=1;
var v1=1;
$(".r").click(function(){
aa=500;
var aa=aa*v;
if(x1>1){
$( ".d1" ).animate({
right: aa.toString()+"px",
fontSize: "3em",
borderWidth: "5px"
}, 1500 );
l=l+1;
v=v+1;
x1=x1-1;
v1=v1-1;
}
});
$(".l").click(function(){
var aa=300;
aa=aa*v1;
if(l>1)
{
$( ".d1" ).animate({
left: aa.toString()+"px",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
x1=x1+1;
l=l-1;
v1=v1+1;
v=v-1;
}
});
});
.d1{
border:1px solid #DEDEDE;
width:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="d1">
<ul>
<li >
<a href="#">
<img style="width=100px;height:70px" src="Toyota/1.jpg"/>
<span style="width:100px;height:100px;font-size:small;">This is a new toyota1<span><br>
<span style="width:100px;height:100px;font-size:small;">&nbsp$9,000</span>
</a>
</li>
<li >
<a href="#">
<img style="width=100px;height:70px" src="Toyota/1.jpg"/>
<span style="width:100px;height:100px;font-size:x-small;">This is a new toyota2<span>
</a>
</li>
</ul>
</div>
<div class="l">Left</div>
<div class="r">Right</div>