[FIXED] How to limit these button in chain-like way?

Issue

How to achieve these?

1. The 6 chain limited numbered buttons
2. The "start point" are button #1 and button #6, can always be activate or disabled
3. button #4 is disabled unless I activated button #3 or #5 (or both)
4. button #3 is disabled unless I activated button #2 or #4 (or both)
5. the rest are similar rule

I prefer putting the "solution" code in between the html provided below, I have no experience of using separate sheets of CSS, JavaScript, etc. But welcome to provide if you think it will make me overcome the problem at ease

let poin = 0;

function  clickin(that) {
  if (that.style.backgroundColor == "red") {
    that.style.backgroundColor = "grey";
    poin--
    document.getElementById("count").innerHTML = poin;
  } else {
    that.style.backgroundColor = "red";
    poin++
    document.getElementById("count").innerHTML = poin;

  }
}

.circle {
  height: 50px;
  width: 50px;
  background-color: grey;
  border-radius: 50%;
  font-size: 30px;
}

.counter {
  font-size: 50px;
  color: blue;
}

<button id="aaa" onclick="clickin(this)" class="circle">1</button>
<button id="bbb" onclick="clickin(this)" class="circle">2</button>
<button id="ccc" onclick="clickin(this)" class="circle">3</button>
<button id="ddd" onclick="clickin(this)" class="circle">4</button>
<button id="eee" onclick="clickin(this)" class="circle">5</button>
<button id="fff" onclick="clickin(this)" class="circle">6</button><br>
<span id="count" class="counter">0</span><br>

Solution

I'm not entirely sure on the logic as there are a few unspecified scenarios, but based on everything outlined by OP, here is a possible solution.

Firstly, because all buttons share a class, we can grab all buttons via querySelectorAll to loop through and apply event listeners. Next, we essentially have 2 rules for when a button can activate.

1. It is the 1st or 6th button
2. It has a neighboring button that is currently active

We can use those 2 main rules to determine if a button can be activated, and then simply toggle a class using those rules.

And lastly, I opted to get rid of a variable for points as it wasn't needed based on the code provided. We can simply check how many buttons are active using querySelectorAll and getting the length property.

// We grab all elements with the class "circle" and loop through them
document.querySelectorAll(".circle").forEach(b => {
  // "b" refers to the current element in this loop
  // We will assign an event listener for when it is clicked
  b.addEventListener("click", e => {
    // "e" refers to the current event object
    // "e.target" refers to the element that was just clicked (the button)
    let el = e.target,
        // "canActivate" checks if our button has an innerText value of 1 or 6
        // or if a button beside of it has our "active" class
        canActivate = (el.innerText == "1" || el.innerText == "6" || el.previousElementSibling.className.includes("active") || el.nextElementSibling.className.includes("active"))
        
    // toggle() lets us add the "active" class, but only if our "canActivate" check is true
    // And it cannot already have the "active" class. If any of that is false, it removes
    // the class and it becomes disabled again
    el.classList.toggle("active", canActivate && !el.className.includes("active"))
    
    // Lastly, we count how many buttons have the "active" class. That is the total point value
    document.querySelector("#count").innerText = document.querySelectorAll(".active").length
  })
})

.circle {
  background: #888;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  font-size: 30px;
}

.counter {
  font-size: 50px;
  color: blue;
}

.active { background: #F00; }

<button class="circle">1</button>
<button class="circle">2</button>
<button class="circle">3</button>
<button class="circle">4</button>
<button class="circle">5</button>
<button class="circle">6</button><br>
<span id="count" class="counter">0</span><br>

Answered By - EssXTee

Answer Checked By - Katrina (PHPFixing Volunteer)