Change text in multiple divs with same class onclick

Question

I have a list of football matches and would like to replace all scores with "?-?" when pressing a button and toggle back to show the score when pressing again.

div {
  display: table;
}

div div {
  display: table-row;
}

div div div {
  display: table-cell;
}

.score {
  color: blue;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hide scores!</button>
<br>  <br>
<div class="table">

  <div class="match">
    <div class="team1">Manchester United</div>
    <div class="score">1-1</div>
    <div class="team2">Liverpool</div>
  </div>

  <div class="match">
    <div class="team1">Juventus</div>
    <div class="score">2-0</div>
    <div class="team2">Inter Milan</div>
  </div>

  <div class="match">
    <div class="team1">Real Madrid</div>
    <div class="score">1-4</div>
    <div class="team2">Barcelona</div>
  </div>

  <div class="match">
    <div class="team1">Dortmund</div>
    <div class="score">3-0</div>
    <div class="team2">Bayern Munich</div>
  </div>

  <div class="match">
    <div class="team1">PSG</div>
    <div class="score">0-1</div>
    <div class="team2">Marseille</div>
  </div>

</div>

I have experimented with getElementById and innerHTML, but due to the large number of matches I would prefer to use getElementsByClassName instead. I've seen people recommending querySelectorAll() for this, but I can't get the scripts to work.

An alternative would be to run a script replacing all numbers with a question mark inside divs with the same class.

Please help me out by using this fiddle

Answer 1

If you don't want to change your html code

$.each($('.score'), function(key, score) {
  var score_text = $(score).text();
  $(score).data('score', score_text)
})

$('button').click(function() {
	if ($(this).data('hiding-score')) {
  	$(this).data('hiding-score', false);
    $.each($('.score'), function () {
      $(this).text($(this).data('score'));
    });
  } else {
    $(this).data('hiding-score', true);
    $('.score').text('?-?');
  }
})    

div { display:table; }
div div { display:table-row; }
div div div  { display:table-cell; }
.score { color:blue; padding:10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hide scores!</button>

<br>
<br>

<div class="table">

<div class="match">
<div class="team1">Manchester United</div>
<div class="score">1-1</div>
<div class="team2">Liverpool</div>
</div>

<div class="match">
<div class="team1">Juventus</div>
<div class="score">2-0</div>
<div class="team2">Inter Milan</div>
</div>

<div class="match">
<div class="team1">Real Madrid</div>
<div class="score">1-4</div>
<div class="team2">Barcelona</div>
</div>

<div class="match">
<div class="team1">Dortmund</div>
<div class="score">3-0</div>
<div class="team2">Bayern Munich</div>
</div>

<div class="match">
<div class="team1">PSG</div>
<div class="score">0-1</div>
<div class="team2">Marseille</div>
</div>

</div>