Confused on hidding element

I have two button where green button on click so +1 on count and show not show the value until the red button is pressed but it is not happening but rather when I click the green button the value is stored, but is shown too and the value should only be showed when red button is pressed.

Any kind of hints or help will be a lot appreciated

 var clicks = 0;
 function clickME() {
     clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
  }
 function setVisibility(id, visibility) {
 document.getElementById(id).style.display = visibility;
 }
.grow:active
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
 }
 <html>
 <head>



   <input type="image" class="grow" src="green.jpg" onClick="clickME()">
<img src="red.jpg" type="button" name="type"  onclick="setVisibility('sub3',    'inline');";>
  <br><br><br><div id="sub3"> <p id="clicks"></div>

</body></html>



var clicks = 0;
 function clickME() {
     clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
  }
 function setVisibility(id, visibility) {
 document.getElementById(id).style.display = visibility;
 }
.grow:active
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
 }

#sub3 {   /* this was the missing part */
  display: none;
}
<input type="image" class="grow" src="green.jpg" onClick="clickME()">
<img src="red.jpg" type="button" name="type"  onclick="setVisibility('sub3',    'inline');";>
  <br><br><br><div id="sub3"> <p id="clicks"></p></div>

Call setVisibility(“sub3″,”none”); onload or set visibility to none in the html itself.

 var clicks = 0;
setVisibility("sub3","none");
 function clickME() {
     clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
  }
 function setVisibility(id, visibility) {
 document.getElementById(id).style.display = visibility;
 }
.grow:active
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
 }
 <html>
 <head>



   <input type="image" class="grow" src="green.jpg" onClick="clickME()">
<img src="red.jpg" type="button" name="type"  onclick="setVisibility('sub3',    'inline');";>
  <br><br><br><div id="sub3"> <p id="clicks"></div>

</body></html>

Just set the initial visibility of sub3 to none either using stylesheet

#sub3
{
display:none;
}

or inline <div id=”sub3″ style=”display:none”> <p id=”clicks”></p></div>

You have to first make that div hidden by display:none

<html>
 <head>
 <style>
.grow:active
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
 }</style>


<script>
 var clicks = 0;
 function clickME() {
     clicks += 1;


  }
 function setVisibility() {
 document.getElementById("clicks").innerHTML = clicks;
 }
 </script>
 <input type="image" class="grow" src="green.jpg" onClick="clickME()">
<img src="red.jpg" type="button" name="type"  onclick="setVisibility()";>
  <br><br><br><div id="sub3"> <p id="clicks"></p></div>

</body>

</html>