[Solved] how to set font-awesome check icon when click then check [closed]

by 


$("#box1").click(function() {
  $("#box1").css("display", "none");
  $("#check1").css("display", "block");

});
$("#check1").click(function() {
  $("#box1").css("display", "block");
  $("#check1").css("display", "none");

});

$("#box2").click(function() {
  $("#box2").css("display", "none");
  $("#check2").css("display", "block");

});
$("#check2").click(function() {
  $("#box2").css("display", "block");
  $("#check2").css("display", "none");

});
$("#box3").click(function() {
  $("#box3").css("display", "none");
  $("#check3").css("display", "block");

});
$("#check3").click(function() {
  $("#box3").css("display", "block");
  $("#check3").css("display", "none");

});
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><script type="text/javascript" src="js/jquery.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><style>#check1,
#check2,
#check3 {
  display: none;
}

</style>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <style>
        #check1, #check2, #check3 {
            display: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <label>
                first
      <i class="fa fa-square-o" aria-hidden="true" id="box1"></i>
                <i class="fa fa-check-square" aria-hidden="true" id="check1"></i>
            </label>
        </li>
        <li>
            <label>
                second
               <i class="fa fa-square-o" aria-hidden="true" id="box2"></i>
                <i class="fa fa-check-square" aria-hidden="true" id="check2"></i>
            </label>
        </li>
        <li>
            <label>
                third
      <i class="fa fa-square-o" aria-hidden="true" id="box3"></i>
                <i class="fa fa-check-square" aria-hidden="true" id="check3"></i>
            </label>
        </li>
    </ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
</body>
    <script>
        $("#box1").click(function () {
            $("#box1").css("display", "none");
            $("#check1").css("display", "block");

        });
        $("#check1").click(function () {
            $("#box1").css("display", "block");
            $("#check1").css("display", "none");

        });

        $("#box2").click(function () {
            $("#box2").css("display", "none");
            $("#check2").css("display", "block");

        });
        $("#check2").click(function () {
            $("#box2").css("display", "block");
            $("#check2").css("display", "none");

        });
        $("#box3").click(function () {
            $("#box3").css("display", "none");
            $("#check3").css("display", "block");

        });
        $("#check3").click(function () {
            $("#box3").css("display", "block");
            $("#check3").css("display", "none");

        });
    </script>
</html>

solved how to set font-awesome check icon when click then check [closed]