Calculate the percentage for a Value when button is clicked using JS PHP

I am working a table which displays option of tokens that a user can stake with a 30days, 60days, 90days option. The default percentage for 30days is specified in the database, but i want a situation whereby when a user clicks 60days, the displayed percentage increases by say 30% and when they click 90days it increases by 60%. I am new to developing and do not know the Javascript or or Jquery to employ. My table is below. Thanks in advance!

EDIT: I am using radio input, I want the Value of the radio to be used for calculating the default percentage for specified in the database.

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  border: 1px solid #ffc107;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0.2rem;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #ffc107;
}

.headernew {
 text-align: center;
 
    }
    
 .container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

h2 {
  font-size: 26px;
  margin: 20px 0;
  text-align: center;
}
h2 small {
  font-size: 0.5em;
}

.responsive-table li {
  border-radius: 3px;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.responsive-table .table-header {
  background-color: #95A5A6;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.responsive-table .table-row {
  background-color: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
}
.responsive-table .col-1 {
  flex-basis: 10%;
  font-size: 14px;
  display: flex;
  align-items:center;
  margin-left: -40px;
  margin-right: 32px;
  
}
.responsive-table .col-2 {
  flex-basis: 40%;
  font-size: 14px;
  display: flex;
  align-items:center;
  margin-right: 30px;
}
.responsive-table .col-3 {
  flex-basis: 25%;
  font-size: 14px;
  display: flex;
  align-items:center;
}
.responsive-table .col-4 {
  flex-basis: 25%;
  font-size: 14px;
  display: flex;
  align-items:center;
}
@media all and (max-width: 356px) {
  .responsive-table .table-header {
    display: none;
  }
  .responsive-table li {
    display: block;
  }
  .responsive-table .col {
    flex-basis: 100%;
  }
  .responsive-table .col {
    display: flex;
    padding: 10px 0;
  }
  .responsive-table .col:before {
    color: #6C7A89;
    padding-right: 10px;
    content: attr(data-label);
    flex-basis: 50%;
    text-align: right;
  }
}
}

JavaScript
​x
 
.radio-toolbar input[type="radio"] {
  display: none;
}
​
.radio-toolbar label {
  display: inline-block;
  border: 1px solid #ffc107;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0.2rem;
}
​
.radio-toolbar input[type="radio"]:checked+label {
  background-color: #ffc107;
}
​
.headernew {
 text-align: center;
 
    }
    
 .container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}
​
h2 {
  font-size: 26px;
  margin: 20px 0;
  text-align: center;
}
h2 small {
  font-size: 0.5em;
}
​
.responsive-table li {
  border-radius: 3px;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.responsive-table .table-header {
  background-color: #95A5A6;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.responsive-table .table-row {
  background-color: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
}
.responsive-table .col-1 {
  flex-basis: 10%;
  font-size: 14px;
  display: flex;
  align-items:center;
  margin-left: -40px;
  margin-right: 32px;
  
}
.responsive-table .col-2 {
  flex-basis: 40%;
  font-size: 14px;
  display: flex;
  align-items:center;
  margin-right: 30px;
}
.responsive-table .col-3 {
  flex-basis: 25%;
  font-size: 14px;
  display: flex;
  align-items:center;
}
.responsive-table .col-4 {
  flex-basis: 25%;
  font-size: 14px;
  display: flex;
  align-items:center;
}
@media all and (max-width: 356px) {
  .responsive-table .table-header {
    display: none;
  }
  .responsive-table li {
    display: block;
  }
  .responsive-table .col {
    flex-basis: 100%;
  }
  .responsive-table .col {
    display: flex;
    padding: 10px 0;
  }
  .responsive-table .col:before {
    color: #6C7A89;
    padding-right: 10px;
    content: attr(data-label);
    flex-basis: 50%;
    text-align: right;
  }
}
}

<head><link rel="stylesheet" href="https://coinscord.com/coin/bootstrap/css/bootstrap.min.css"></head>

<ul class="responsive-table">
    <li class="table-header">
      <div class="col col-1">Token</div>
      <div class="col col-2">Est. APY</div>
      <div class="col col-3">Duration (days)</div>
      <div class="col col-4"></div>
    </li>
   
    
    <li class="table-row">
      <div class="col col-1" data-label="icon"><img src="" alt="icon" style="width:30px;height:30px;">&nbsp;&nbsp;ADA</div>
      <div class="col col-2" data-label="Percent"><font color="green">
15%</font></div>
      <div class="col col-3" data-label="Days"><div class="radio-toolbar">
  <input type="radio" id="radio1" name="radios" value="all">
  <label for="radio1">30</label>

  <input type="radio" id="radio2" name="radios" value="false">
  <label for="radio2">60</label>
</div></div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="icon"><img src="../coin/images/coins/bnb.png" alt="bnb" style="width:30px;height:30px;">&nbsp;&nbsp;BNB</div>
      <div class="col col-2" data-label="Percent"><font color="green">
10.4%</font></div>
      <div class="col col-3" data-label="Days"><div class="radio-toolbar">
  <input type="radio" id="radio7" name="radios" value="all">
  <label for="radio7">30</label>

  <input type="radio" id="radio72" name="radios" value="false">
  <label for="radio72">60</label>
</div></div>
   
    </li>
    
  </ul>

JavaScript
 
<head><link rel="stylesheet" href="https://coinscord.com/coin/bootstrap/css/bootstrap.min.css"></head>
​
<ul class="responsive-table">
    <li class="table-header">
      <div class="col col-1">Token</div>
      <div class="col col-2">Est. APY</div>
      <div class="col col-3">Duration (days)</div>
      <div class="col col-4"></div>
    </li>
   
    
    <li class="table-row">
      <div class="col col-1" data-label="icon"><img src="" alt="icon" style="width:30px;height:30px;">&nbsp;&nbsp;ADA</div>
      <div class="col col-2" data-label="Percent"><font color="green">
15%</font></div>
      <div class="col col-3" data-label="Days"><div class="radio-toolbar">
  <input type="radio" id="radio1" name="radios" value="all">
  <label for="radio1">30</label>
​
  <input type="radio" id="radio2" name="radios" value="false">
  <label for="radio2">60</label>
</div></div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="icon"><img src="../coin/images/coins/bnb.png" alt="bnb" style="width:30px;height:30px;">&nbsp;&nbsp;BNB</div>
      <div class="col col-2" data-label="Percent"><font color="green">
10.4%</font></div>
      <div class="col col-3" data-label="Days"><div class="radio-toolbar">
  <input type="radio" id="radio7" name="radios" value="all">
  <label for="radio7">30</label>
​
  <input type="radio" id="radio72" name="radios" value="false">
  <label for="radio72">60</label>
</div></div>
   
    </li>
    
  </ul> 

Answer

The solution is little complex, but its just coding:

i suggest you to change the value of name for radios button s for each row, or you could just select only one radio button among all, so i suppose you want to select the choice for each row. so i have rename radios1 for the second row

//select the radio for 30%
$("#radio1, #radio7").prop("checked", true);
let percent90days = 60.0;
let percent60days = 30.0;
//save initial values
$(".table-row div[data-label=Percent]").each( function(){
  let valuetosave = $(this).text().replace("%","");
  $(this).attr("data-save", valuetosave)
});

//trap event click on radio
$(".table-row input[type=radio]").on("click", function(){
 
  let idRadio = $(this).attr("id")
  let percentAsked = $(this).closest(".table-row").find(`label[for=${idRadio}]`).text();
  let selectorToTrapValue = $(this).closest(".table-row").find("div[data-label=Percent]");
  let initialvalue = parseFloat(selectorToTrapValue.data("save"));
  //i dunno what you want for your calculus its not clear
  // i dunno if you want to add 30% or you want increase the initial value of 30%
  // so i display value
  console.log("initial value: " + initialvalue + " percentAsked: " + percentAsked)
  
  //if percentAsked is 30% display the initialvalue
  if(percentAsked == "30"){
    selectorToTrapValue.text(initialvalue + "%")
    return;
  }
  //calculate the new value
  if(percentAsked == "60"){
    selectorToTrapValue.text(initialvalue + initialvalue * percent60days / 100.0 + "%")
  }else if (percentAsked == "90"){
    selectorToTrapValue.text(initialvalue + initialvalue * percent90days / 100.0 + "%")
  } 
  
});

JavaScript
 
//select the radio for 30%
$("#radio1, #radio7").prop("checked", true);
let percent90days = 60.0;
let percent60days = 30.0;
//save initial values
$(".table-row div[data-label=Percent]").each( function(){
  let valuetosave = $(this).text().replace("%","");
  $(this).attr("data-save", valuetosave)
});
​
//trap event click on radio
$(".table-row input[type=radio]").on("click", function(){
 
  let idRadio = $(this).attr("id")
  let percentAsked = $(this).closest(".table-row").find(`label[for=${idRadio}]`).text();
  let selectorToTrapValue = $(this).closest(".table-row").find("div[data-label=Percent]");
  let initialvalue = parseFloat(selectorToTrapValue.data("save"));
  //i dunno what you want for your calculus its not clear
  // i dunno if you want to add 30% or you want increase the initial value of 30%
  // so i display value
  console.log("initial value: " + initialvalue + " percentAsked: " + percentAsked)
  
  //if percentAsked is 30% display the initialvalue
  if(percentAsked == "30"){
    selectorToTrapValue.text(initialvalue + "%")
    return;
  }
  //calculate the new value
  if(percentAsked == "60"){
    selectorToTrapValue.text(initialvalue + initialvalue * percent60days / 100.0 + "%")
  }else if (percentAsked == "90"){
    selectorToTrapValue.text(initialvalue + initialvalue * percent90days / 100.0 + "%")
  } 
  
});

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  border: 1px solid #ffc107;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0.2rem;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #ffc107;
}

.headernew {
 text-align: center;
 
    }
    
 .container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

h2 {
  font-size: 26px;
  margin: 20px 0;
  text-align: center;
}
h2 small {
  font-size: 0.5em;
}

.responsive-table li {
  border-radius: 3px;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.responsive-table .table-header {
  background-color: #95A5A6;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.responsive-table .table-row {
  background-color: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
}
.responsive-table .col-1 {
  flex-basis: 10%;
  font-size: 14px;
  display: flex;
  align-items:center;
  margin-left: -40px;
  margin-right: 32px;
  
}
.responsive-table .col-2 {
  flex-basis: 40%;
  font-size: 14px;
  display: flex;
  align-items:center;
  margin-right: 30px;
}
.responsive-table .col-3 {
  flex-basis: 25%;
  font-size: 14px;
  display: flex;
  align-items:center;
}
.responsive-table .col-4 {
  flex-basis: 25%;
  font-size: 14px;
  display: flex;
  align-items:center;
}
@media all and (max-width: 356px) {
  .responsive-table .table-header {
    display: none;
  }
  .responsive-table li {
    display: block;
  }
  .responsive-table .col {
    flex-basis: 100%;
  }
  .responsive-table .col {
    display: flex;
    padding: 10px 0;
  }
  .responsive-table .col:before {
    color: #6C7A89;
    padding-right: 10px;
    content: attr(data-label);
    flex-basis: 50%;
    text-align: right;
  }
}
}

JavaScript
 
.radio-toolbar input[type="radio"] {
  display: none;
}
​
.radio-toolbar label {
  display: inline-block;
  border: 1px solid #ffc107;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0.2rem;
}
​
.radio-toolbar input[type="radio"]:checked+label {
  background-color: #ffc107;
}
​
.headernew {
 text-align: center;
 
    }
    
 .container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}
​
h2 {
  font-size: 26px;
  margin: 20px 0;
  text-align: center;
}
h2 small {
  font-size: 0.5em;
}
​
.responsive-table li {
  border-radius: 3px;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.responsive-table .table-header {
  background-color: #95A5A6;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.responsive-table .table-row {
  background-color: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
}
.responsive-table .col-1 {
  flex-basis: 10%;
  font-size: 14px;
  display: flex;
  align-items:center;
  margin-left: -40px;
  margin-right: 32px;
  
}
.responsive-table .col-2 {
  flex-basis: 40%;
  font-size: 14px;
  display: flex;
  align-items:center;
  margin-right: 30px;
}
.responsive-table .col-3 {
  flex-basis: 25%;
  font-size: 14px;
  display: flex;
  align-items:center;
}
.responsive-table .col-4 {
  flex-basis: 25%;
  font-size: 14px;
  display: flex;
  align-items:center;
}
@media all and (max-width: 356px) {
  .responsive-table .table-header {
    display: none;
  }
  .responsive-table li {
    display: block;
  }
  .responsive-table .col {
    flex-basis: 100%;
  }
  .responsive-table .col {
    display: flex;
    padding: 10px 0;
  }
  .responsive-table .col:before {
    color: #6C7A89;
    padding-right: 10px;
    content: attr(data-label);
    flex-basis: 50%;
    text-align: right;
  }
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head><link rel="stylesheet" href="https://coinscord.com/coin/bootstrap/css/bootstrap.min.css"></head>

<ul class="responsive-table">
    <li class="table-header">
      <div class="col col-1">Token</div>
      <div class="col col-2">Est. APY</div>
      <div class="col col-3">Duration (days)</div>
      <div class="col col-4"></div>
    </li>
   
    
    <li class="table-row">
      <div class="col col-1" data-label="icon"><img src="" alt="icon" style="width:30px;height:30px;">&nbsp;&nbsp;ADA</div>
      <div class="col col-2" data-label="Percent"><font color="green">
15%</font></div>
      <div class="col col-3" data-label="Days"><div class="radio-toolbar">
  <input type="radio" id="radio1" name="radios" value="all">
  <label for="radio1">30</label>

  <input type="radio" id="radio2" name="radios" value="false">
  <label for="radio2">60</label>
</div></div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="icon"><img src="../coin/images/coins/bnb.png" alt="bnb" style="width:30px;height:30px;">&nbsp;&nbsp;BNB</div>
      <div class="col col-2" data-label="Percent"><font color="green">
10.4%</font></div>
      <div class="col col-3" data-label="Days"><div class="radio-toolbar">
  <input type="radio" id="radio7" name="radios1" value="all" >
  <label for="radio7">30</label>

  <input type="radio" id="radio72" name="radios1" value="false" >
  <label for="radio72">60</label>
</div></div>
   
    </li>
    
  </ul>

JavaScript
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head><link rel="stylesheet" href="https://coinscord.com/coin/bootstrap/css/bootstrap.min.css"></head>
​
<ul class="responsive-table">
    <li class="table-header">
      <div class="col col-1">Token</div>
      <div class="col col-2">Est. APY</div>
      <div class="col col-3">Duration (days)</div>
      <div class="col col-4"></div>
    </li>
   
    
    <li class="table-row">
      <div class="col col-1" data-label="icon"><img src="" alt="icon" style="width:30px;height:30px;">&nbsp;&nbsp;ADA</div>
      <div class="col col-2" data-label="Percent"><font color="green">
15%</font></div>
      <div class="col col-3" data-label="Days"><div class="radio-toolbar">
  <input type="radio" id="radio1" name="radios" value="all">
  <label for="radio1">30</label>
​
  <input type="radio" id="radio2" name="radios" value="false">
  <label for="radio2">60</label>
</div></div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="icon"><img src="../coin/images/coins/bnb.png" alt="bnb" style="width:30px;height:30px;">&nbsp;&nbsp;BNB</div>
      <div class="col col-2" data-label="Percent"><font color="green">
10.4%</font></div>
      <div class="col col-3" data-label="Days"><div class="radio-toolbar">
  <input type="radio" id="radio7" name="radios1" value="all" >
  <label for="radio7">30</label>
​
  <input type="radio" id="radio72" name="radios1" value="false" >
  <label for="radio72">60</label>
</div></div>
   
    </li>
    
  </ul>

Advertisement

Answer