I need help with a code that changes the color of selected buttons on each line. Each line should have only one selected button, and I also want to add an input button using AngularJS ng-click. I am using AngularJS for summarizing the buttons at the end of the page. Here is how it currently looks:
.prettyButton:focus {
background-color:#3C8EB7;
}
.prettyButton {
font-size: 36px;
width: 128px;
height: 56px;
border: 5px solid #3C8EB7;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script>angular.module('demo', []);</script>
<link rel="stylesheet" type="text/css" href="button_css.css">
<script src="button_js.js"></script>
</head>
<body>
<div ng-app="demo">
<div class= "list_contain_q">
<div class="queution_1">
<div class="q1" style="color: black; font-size: 50px"> TOPIC </div>
<button class="prettyButton" ng-click="i = 1" ng-init="button1 = 'SPORT'">{{ button1 }}</button>
<button class="prettyButton" ng-click="i = 3" ng-init="button3 = 'history'">{{ button3 }}</button>
<button class="prettyButton" ng-click="i = 4" ng-init="button4 = 'music'">{{ button4 }}</button>
<br></br>
</div>
<div class="queution_2">
<div class="q2" style="color: black; font-size: 50px"> day </div>
<button class="prettyButton" ng-click="j = 12" ng-init="button12 = 'monday'">{{ button12 }}</button>
<button class="prettyButton" ng-click="j = 22" ng-init="button22 = 'sunday'">{{ button22 }}</button>
<button class="prettyButton" ng-click="j = 32" ng-init="button32 = 'friday'">{{ button32 }}</button>
<br></br>
</div>
<div class="queution_3">
<div class="q3" style="color: black; font-size: 50px"> houer </div>
<button class ="prettyButton" ng-click="k = 123" ng-init="button123 = '16:00'">{{ button123 }}</button>
<button class="prettyButton" ng-click="k = 223" ng-init="button223 = '17:00'">{{ button223 }}</button>
<button class="prettyButton" ng-click="k = 323" ng-init="button323 = '18:00'">{{ button323 }}</button>
<button class="prettyButton" ng-click="k = 423" ng-init="button423 = '19:00'">{{ button423 }}</button>
<button class="prettyButton" ng-click="k = 523" ng-init="button523 = '20:00'">{{ button523 }}</button>
<br></br>
<br></br>
</div>
</div>
<h2>summary</h2>
<p class="sumamry" id="sumamry_id" style="color: black; font-size: 40px; text-align: right;"> topic<input type="text" id="topicbtn" value="this['button' + i]" ng-model="this['button' + i]" placeholder="topic"vstyle="color: black; font-size: 40px"> in day<input type="text" id="DayBtn" value="this['button' + j]" ng-model="this['button' + j]" placeholder="in day" style="color: black; font-size: 40px"> in hour <input type="text" id="hourbtn" value="this['button' + k]" ng-model="this['button' + k]" placeholder="time"></p>
</body>
</html>