<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <input type="button" value="Add Hello" id="MyButton" > <select id="mySelect" onchange="myFunction()"> <option value="">Choose Option <option value="Audi">Audi <option value="BMW">BMW <option value="Mercedes">Mercedes <option value="Volvo">Volvo </select> <p id="demo">I would like to say: </p> <p id="demo2">I would like to say: </p> <select id="mySelect2" onchange="myFunction()"> <option value="">Choose Option <option value="Audi">Audi <option value="BMW">BMW <option value="Mercedes">Mercedes <option value="Volvo">Volvo </select> <!-- ************** TABLE 2 ************ --> <div class="table-responsive"> <table class="table table-hover display" id="table1"> <thead class="thead-dark"> <tr> <th>Name</th> <th>Add</th> <th>Points</th> <th>Place</th> </tr> </thead> <tbody> <tr> <td id="table1-1"><strong>Player 1</strong></td> <td> <select class="form-control form-control-sm step table1r1" name="" id="mySelect3" required="" onchange="myFunction1()"> <option value="">Select Round</option> <option class="score lock1" id="t1-score1-1" table="1" score="1" value="7">Lock N Win</option> <option class="score lock1" id="t1-score1-2" table="1" score="2" value="5">Win</option> <option class="score lock1 lock1" id="t1-score1-3" table="1" score="3" value="3">2nd</option> <option class="score lock1" id="t1-score1-4" table="1" score="4" value="2">3rd</option> <option class="score lock1" id="t1-score1-5" table="1" score="5" value="1">4th</option> <option class="score lock1" id="t1-score1-6" table="1" score="6" value="0">Lock N Lose</option> </select> </td> <td>27</td> <!-- <td><p id="demo3"></p></td> --> <td id="demo3"></td> </tr> <tr> <td class="table-primary" id="table1-2"><strong>Player 2</strong></td> <td> <select class="form-control form-control-sm step table1r1" name="" id="mySelect4" required="" onchange="myFunction1()"> <option value="">Select Round</option> <option class="score lock1" id="t1-score2-1" table="1" score="1" value="7">Lock N Win</option> <option class="score lock1" id="t1-score2-2" table="1" score="2" value="5">Win</option> <option class="score lock1" id="t1-score2-3" table="1" score="3" value="3">2nd</option> <option class="score lock1" id="t1-score2-4" table="1" score="4" value="2">3rd</option> <option class="score lock1" id="t1-score2-5" table="1" score="5" value="1">4th</option> <option class="score lock1" id="t1-score2-6" table="1" score="6" value="0">Lock N Lose</option> </select> </td> <td></td> <td id="demo4"></td> </tr> <tr> <td id="table1-3"><strong>Player 3</strong></td> <td> <select class="form-control form-control-sm step table1r1" name="" id="mySelect5" required="" onchange="myFunction1()"> <option value="">Select Round</option> <option class="score lock1" id="t1-score3-1" table="1" score="1" value="7">Lock N Win</option> <option class="score lock1" id="t1-score3-2" table="1" score="2" value="5">Win</option> <option class="score lock1" id="t1-score3-3" table="1" score="3" value="3">2nd</option> <option class="score lock1" id="t1-score3-4" table="1" score="4" value="2">3rd</option> <option class="score lock1" id="t1-score3-5" table="1" score="5" value="1">4th</option> <option class="score lock1" id="t1-score3-6" table="1" score="6" value="0">Lock N Lose</option> </select> </td> <td></td> <td id="demo5"></td> </tr> <tr> <td class="table-primary" id="table1-4"><strong>Player 4</strong></td> <td> <select class="form-control form-control-sm step table1r1" name="" id="mySelect6" required="" onchange="myFunction1()"> <option value="">Select Round</option> <option class="score lock1" id="t1-score4-1" table="1" score="1" value="7">Lock N Win</option> <option class="score lock1" id="t1-score4-2" table="1" score="2" value="5">Win</option> <option class="score lock1" id="t1-score4-3" table="1" score="3" value="3">2nd</option> <option class="score lock1" id="t1-score4-4" table="1" score="4" value="2">3rd</option> <option class="score lock1" id="t1-score4-5" table="1" score="5" value="1">4th</option> <option class="score lock1" id="t1-score4-6" table="1" score="6" value="0">Lock N Lose</option> </select> </td> <td></td> <td id="demo6"></td> </tr> </tbody> </table> </div> <!-- ************* TABLE 2 *************************************** --> <div class="table-responsive"> <table class="table table-hover display2" id="table2"> <thead class="thead-dark"> <tr> <th>Name</th> <th>Add</th> <th>Points</th> <th>Place</th> </tr> </thead> <tbody> <tr> <td id="table2-1"><strong>Player 1</strong></td> <td> <select class="form-control form-control-sm step table2r1" name="" id="" required=""> <option value="">Select Round</option> <option class="score lock2" id="t2-score1-1" table="2" score="1" value="7">Lock N Win</option> <option class="score lock2" id="t2-score1-2" table="2" score="2" value="5">Win</option> <option class="score lock2" id="t2-score1-3" table="2" score="3" value="3">2nd</option> <option class="score lock2" id="t2-score1-4" table="2" score="4" value="2">3rd</option> <option class="score lock2" id="t2-score1-5" table="2" score="5" value="1">4th</option> <option class="score lock2" id="t2-score1-6" table="2" score="6" value="0">Lock N Lose</option> </select> </td> <td>27</td> <td>1</td> </tr> <tr> <td class="table-primary" id="table2-2"><strong>Player 2</strong></td> <td> <select class="form-control form-control-sm step table2r1" name="" id="" required=""> <option value="">Select Round</option> <option class="score lock2" id="t2-score2-1" table="2" score="1" value="7">Lock N Win</option> <option class="score lock2" id="t2-score2-2" table="2" score="2" value="5">Win</option> <option class="score lock2" id="t2-score2-3" table="2" score="3" value="3">2nd</option> <option class="score lock2" id="t2-score2-4" table="2" score="4" value="2">3rd</option> <option class="score lock2" id="t2-score2-5" table="2" score="5" value="1">4th</option> <option class="score lock2" id="t2-score2-6" table="2" score="6" value="0">Lock N Lose</option> </select> </td> <td>15</td> <td>2</td> </tr> <tr> <td id="table2-3"><strong>Player 3</strong></td> <td> <select class="form-control form-control-sm step table2r1" name="" id="" required=""> <option value="">Select Round</option> <option class="score lock2" id="t2-score3-1" table="2" score="1" value="7">Lock N Win</option> <option class="score lock2" id="t2-score3-2" table="2" score="2" value="5">Win</option> <option class="score lock2" id="t2-score3-3" table="2" score="3" value="3">2nd</option> <option class="score lock2" id="t2-score3-4" table="2" score="4" value="2">3rd</option> <option class="score lock2" id="t2-score3-5" table="2" score="5" value="1">4th</option> <option class="score lock2" id="t2-score3-6" table="2" score="6" value="0">Lock N Lose</option> </select> </td> <td>13</td> <td>3</td> </tr> <tr> <td class="table-primary" id="table2-4"><strong>Player 4</strong></td> <td> <select class="form-control form-control-sm step table2r1" name="" id="" required=""> <option value="">Select Round</option> <option class="score lock2" id="t2-score4-1" table="2" score="1" value="7">Lock N Win</option> <option class="score lock2" id="t2-score4-2" table="2" score="2" value="5">Win</option> <option class="score lock2" id="t2-score4-3" table="2" score="3" value="3">2nd</option> <option class="score lock2" id="t2-score4-4" table="2" score="4" value="2">3rd</option> <option class="score lock2" id="t2-score4-5" table="2" score="5" value="1">4th</option> <option class="score lock2" id="t2-score4-6" table="2" score="6" value="0">Lock N Lose</option> </select> </td> <td>11</td> <td id="total-2">4</td> </tr> </tbody> </table> </div> </div>

.entry:not(:first-of-type) { margin-top: 10px; } .glyphicon { font-size: 14px; } .winner { color: #FFCA28; } .firstPlace { color: #7CFC00; } option:disabled { background: #A9A9A9; } .none { cursor: none; }

//$(function(){ /*$('#MyButton').click(function(){ //$( "p" ).append( document.createTextNode( "Hello " ) ); $( "p" ).append( '<span class="glyphicon glyphicon-star winner"></span>'); //$('#myTable > tbody > tr.dynamically-added-by-ajax').append('<td>additional info ,</td>'); });*/ function myFunction1() { var x = document.getElementById('mySelect'); var y = document.getElementById("mySelect3"); var a = document.getElementById("mySelect4"); var b = document.getElementById("mySelect5"); var c = document.getElementById("mySelect6"); $('#MyButton').click(function(){ if (x.value == "Audi") { //document.getElementById("demo").innerHTML = "You selected: " + y; $( "#demo" ).append( '<span class="glyphicon glyphicon-star winner"></span>'); } else if (y.value == "7"){ $( "#demo3" ).append( '<span class="glyphicon glyphicon-user firstPlace"></span>'); } else if (a.value == "7"){ $( "#demo4" ).append( '<span class="glyphicon glyphicon-user firstPlace"></span>'); } else if (b.value == "7"){ $( "#demo5" ).append( '<span class="glyphicon glyphicon-user firstPlace"></span>'); } else if (c.value == "7"){ $( "#demo6" ).append( '<span class="glyphicon glyphicon-user firstPlace"></span>'); } });//END of button click function } //END of myFunction $(function () { var $select = $(".table1r1"); $select.on("change", function() { var selected = []; $.each($select, function(index, select) { if (select.value !== "") { selected.push(select.value); } }); $(".lock1").prop("disabled", false); for (var index in selected) { $('.lock1[value="'+selected[index]+'"]').prop("disabled", true); //$(this).addClass("none"); } }); }); $(function () { var $select2 = $(".table2r1"); $select2.on("change", function() { var selected = []; $.each($select2, function(index, select2) { if (select2.value !== "") { selected.push(select2.value); } }); $(".lock2").prop("disabled", false); for (var index in selected) { $('.lock2[value="'+selected[index]+'"]').prop("disabled", true); } }); }); //});