クリックした要素の取得について【jQuery】

jQueryを使ってクリックした要素を取得して.selectedクラス（クリックした要素が分かりやすいように濃くするクラス）を反映させたいです。
以下のコードでうまくいかなくて困っております。
原因を教えていただければ幸いです。

html
1<?php
2
3require_once(__DIR__ . '/functions.php');
4
5$text1 ='';
6$text2='';
7
8if ($_SERVER['REQUEST_METHOD'] === 'POST'){
9  $text1 = $_POST['text1'];
10  $text2 = $_POST['text2'];
11}
12  $result = $text1 + $text2
13 ?>
14
15<!DOCTYPE html>
16<html lang = "ja">
17<head>
18  <meta charset = "utf-8">
19  <title>calculator</title>
20  <link rel="stylesheet" href="styles.css">
21</head>
22<body>
23<div id ="container">
24  <h1>計算</h1>
25  <form action="" method="POST">
26    <div id="container-1">
27      <input type="text" id="text1" name="text1" placeholder="text1" value="<?= h($text1); ?>"  onKeyup="this.value=this.value.replace(/[^0-9]+/,'')">
28      <ul>
29        <li data-id="puls" class="btn">+</li>
30        <li data-id="mainasu" class="btn">−</li>
31        <li data-id="kakeru" class="btn">×</li>
32        <li data-id="waru" class="btn">÷</li>
33        <input type="hidden" id="answer" name="answer" value="">
34      </ul>
35      <input type="text"  id="text2" name="text2" placeholder="text2" value="<?= h($text2); ?>" onKeyup="this.value=this.value.replace(/[^0-9]+/,'')">
36    </div>
37  <input type="submit" id="result" value ="result">
38  <div id="cal_result"><?= h($result); ?></div>
39</div>
40</form>
41<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
42<script>
43$(function(){
44  'use strict';
45
46  $('.btn').on('click', function(){
47    $('.btn').removeClass('selected');
48    $(this).addClass('selected');
49});
50</script>
51</body>
52</html>
53

css
1body {
2  font-size: 16px;
3  font-family: Arial, sans-serif;
4}
5
6#container {
7  text-align: center;
8  width: 500px;
9  margin: 15px auto;
10}
11h1{
12  font-size: 20px;
13  line-height:50px;
14  padding: 10px;
15}
16h1 ,ul > li {
17  border: 1px solid #ddd;
18  border-radius: 5px;
19}
20#container-1{
21  display: flex;
22}
23ul{
24margin:auto;
25  list-style: none;
26  padding: 0;
27}
28li{
29  width:20px;
30  margin: auto;
31  cursor: pointer;
32}
33#text1{
34  height: 10px;
35  margin-top: 25px;
36}
37#text2{
38  height: 10px;
39  margin-top: 25px;
40}
41#result{
42  margin-top: 15px;
43  float:right;
44  cursor: pointer;
45  box-shadow: 0 4px 0 #0088cc;
46  width: 100px;
47}
48#cal_result{
49    float:right;
50    margin-top: 15px;
51}
52.btn{
53    opacity: 0.5;
54    font-weight: bold;
55}
56.btn + .btn{
57  margin-top: 5px;
58}
59.selected{
60  opacity: 1.0;
61}
62

php
1<?php
2
3function h($s){
4  return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
5}
6

行動規範の内容に同意します

回答1件

ベストアンサー

js
1$(function(){
2  'use strict';
3
4  $('.btn').on('click', function(){
5    $('.btn').removeClass('selected');
6    $(this).addClass('selected');
7  }); // << ADD
8});