Like when you click on an element to change its class and content, and when re-click to return back?

Good day!
<span class="badge bg-danger" style="cursor: pointer;">150</span>
<span class="badge bg-danger" style="cursor: pointer;">250</span>
<span class="badge bg-danger" style="cursor: pointer;">350</span>
<span class="badge bg-danger" style="cursor: pointer;">450</span>

As to each span to tie the 2 numbers (each element of these numbers are private), such as 150 default 200 display when you click on this item and change class badge bg-success, and when re-clicking on the element to return the class and the default content?
April 19th 20 at 12:32
2 answers
April 19th 20 at 12:34
As an option))
<span class="badge bg-danger" onclick="changeBadge(150, 200)" style="cursor: pointer;">150</span>
 <span class="badge bg-danger" onclick="changeBadge(250, 255)" style="cursor: pointer;">250</span>
 <span class="badge bg-danger" onclick="changeBadge(350, 235)" style="cursor: pointer;">350</span>
 <span class="badge bg-danger" onclick="changeBadge(450, 225)" style="cursor: pointer;">450</span>
the <script>

 const changeBadge = (oldContent, newContent) => {

 const badge =

 if (badge.classList.contains('bg-danger')) {
 badge.innerHTML = newContent
 } else {
 badge.innerHTML = oldContent
well is himself.
to clutter up the html as it is not very good.
Based on what the class is now well approx.
Take the data from the html well, actually not very good, but if the user opens the html and replace him on the right? - Raphael_Pacocha23 commented on April 19th 20 at 12:37
@Raphael_Pacocha23, I agree. I suggested the simple implementation - Kenneth.Zboncak13 commented on April 19th 20 at 12:40
April 19th 20 at 12:36
for me it is the best option, if you use jQuery

The correct way is to store in the data item itself, its condition and based on its value to take any action

To play here)

Find more questions by tags jQuery