jQuery нажатие на кнопки иногда работает с несколькими нажатиями на нее, а иногда не работает

Question

Затем я создал три раза. Затем три кнопки с классом цвета, границей и новым. Я хочу, чтобы эти три кнопки работали без обновления страницы, но мне приходится несколько раз обновлять sh страницу, пока она не будет работать случайным образом.

var clicked = true;
var clicked1 =true;
var clicked2 = true;

$(document).ready(function() {

  $("#color").click(function() {
    if (clicked) {
      $(".square").css('background-color', 'red');
      clicked = false;
    } else {
      $(".square").css('background-color', 'transparent');
      clicked = true;
    }
  });

  $("#border").click(function() {
    if (clicked1) {
      $(".square").css('border-radius', '15px');
      clicked1 = false;
    } else {
      $(".square").css('border-radius', '0px');
      clicked1 = false;
    }
  });

  $("#new").click(function() {
    if (clicked2) {
      $(".newSq").addClass("square");
      clicked2 = false;
    } else {
      $(".newSq").removeClass("square");
      clicked2 = false;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="all">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="newSq"></div>
</div>
<div>
  <button id="color" id="hideColor">Toggle Colors</button>
  <button id="border">Toggle rounded Borders</button>
  <button id="new">Add a new Box</button>
</div>