How To Change The Color Of The Timeline Circle When It Is An Active Stage?

I have created a vertical timeline. Now I have to set the background color of the circle when it is an active stage. You can check the below image first circle with text is an acti

Solution 1:

I simplified your code ( deleted the code that is not for the question ) .

HTML

I added a relation between the buttons and the spans. With data-target id of span.

JQ

EDIT after op comment

First, you get the targeted span id ( when click on button2, span with id #button2 will be selected )

Second, get the span before the current selected one ( if there is one ) . Example when click on button2 , prevSelected will have value #button1

Then add and remove classes to the span and the links

See edited code below

CSS

add styles for the greenSpan class

Observation

1. No need to add multiple $(document).ready(function(){. Nest all your code inside only 1 function
2. Instead of giving active class to span and active class to a, you could give that active class to the li containing span and a and then just style in css, for example li.active > span {/*timeline-circle-active css*/} and li.active > a {/*timeline-text-active css*/}

See snippet below.

$(document).ready(function() {

  $('.button-clicked').click(function() {

    var TargetSpan = "#" + $(this).attr("data-target"),
        prevSelected = $(TargetSpan).parents("li").prev("li").find("span")
      
    prevSelected.addClass("greenSpan").removeClass("timeline-circle-active")
    prevSelected.next("a").addClass("greenLink").removeClass("timeline-text-active")
    $(TargetSpan).addClass("timeline-circle-active").removeClass("greenSpan")
    $(TargetSpan).next("a").addClass("timeline-text-active")


  });
});

.info-timeline ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-timeline ul li {
  margin: 0 10px;
}

.info-timeline ul li span {
  position: relative;
  border: 2px solid #000;
  border-radius: 100%;
  width: 45px;
  line-height: 40px;
  text-align: center;
  margin-top: 30px;
  color: #000;
  z-index: 2;
  display: inline-block;
}

.info-timeline ul li span.timeline-circle-active {
  background-color: #ff0000;
  color: #000;
  border: 1px solid #ffff00 !important;
}

.info-timeline ul li a.timeline-text-active {
  color: #ff0000 !important;
}

.info-timeline ul li a.greenLink {
  color: green
}

.info-timeline ul li:not(:first-of-type) span:before {
  position: absolute;
  border: 1px solid #000;
  width: 0;
  height: 30px;
  display: block;
  content: '';
  left: 50%;
  z-index: 1;
  top: -32px;
  margin-left: -1px;
}

.info-timeline ul li:first-child {
  margin-top: 0;
}

.info-timeline ul li:first-child:before {
  display: none;
}

.info-timeline ul li a {
  color: #000;
  margin: 10px;
}

.info-timeline ul li span.greenSpan {
  background: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-timeline">
  <ul>
    <li><span id="button1" class=" timeline-circle-active">1</span><a href="#" class="timeline-text-active">Button1</a></li>
    <li><span id="button2">2</span><a href="#">Button2</a></li>
    <li><span id="button3">3</span><a href="#">Button3</a></li>
    <li><span id="button4">4</span><a href="#">Button4</a></li>
  </ul>
</div>
<!--info-timeline-->

<button type="submit" class="button-clicked" data-target="button1">Button1</button>
<button type="submit" class="button-clicked" data-target="button2">Button2</button>
<button type="submit" class="button-clicked" data-target="button3">Button3</button>
<button type="submit" class="button-clicked" data-target="button4">Button4</button>