JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<div id="sidebar">
    <ul>
        <li><a href="#" id="1" class="active">1</a></li>
        <li><a href="#" id="2" class="inactive">2</a></li>
        <li><a href="#" id="3" class="inactive">3</a></li>
    </ul>
</div>

CSS

a.active {
    background-color:#ccd9ff;
    border-radius:15px 15px;
    font-size:30px;
    color:Red;
}

a.inactive {
    border:0;
    background:0;
    font-size:30px;;
    color:navy;
}

JavaScript

/*IN THE BEGGINING FIRST LINK IS ACTIVE...SO THE PREPEND IMAGE MUST BE HERE*/

$('#sidebar ul li a.active').prepend('<img class="gallery-selected-bg" src="http://www.saugeentimes.com/496%20Liz/girls%20soccer%20aug%204,%202010/soccer-ball-small.jpg" alt="gallery-background">');

/*BUT THEN THE PREPEND IMAGE MUST ME PLACED ON ACTIVE LINK ONLY*/

$(function(){
    var sidebar = $('#sidebar');
    sidebar.delegate('a.inactive','click',function(){
        sidebar.find('.active').toggleClass('active inactive');
        $(this).toggleClass('active inactive');
        $(this).prepend('<img class="gallery-selected-bg" src="http://www.saugeentimes.com/496%20Liz/girls%20soccer%20aug%204,%202010/soccer-ball-small.jpg" alt="gallery-background">');
    });
});