How to combine 2 javascript/jquery functions in a Wordpress plugin

Question

When it comes to JavaScript/jQuery, I'm still a bit of a newbie.

I've currently got a donation form with an html list in WordPress (plugin). The first 3 options are just fixed options (5 euro, 10 euro, 15 euro), but the last li option is a "open" option. When the last li is clicked, a hidden input field shows up where a user could type in a different value.

With jQuery I need these 2 functions:

The first one is to set li to active when it is clicked. When a specific li is active, a hidden input field will be visible.

The second one is to delete the first x character and the last x characters of the words inside the li .

These are the jQuery codes I'm currently using

This one for the active li:

$(".donate-box ul li").click(function(){
   if (!$(this).hasClass("active")) {
      $("li.active").removeClass("active");
      $(this).addClass("active");
   }
});

This one for the characters:

$('.donate-box ul li').text(function (i,t) {
   return t.slice(0, -72);
});
$('.donate-box ul li').each(function() {
   var $th = $(this);
   $th.text( $th.text().substr(99) );
});

The html : This is for the list options

<ul id="form_624_field_2" label="" class="" required=""> 
    <li>€ 5,00</li> 
    <li>€ 10,00</li> 
    <li>€ 15,00</li> 
    <li>Anders </li> 
</ul>

This is for the open option, which opens when "anders" is active

<p id="rfmp_open_amount_624" style="display:none;"> 
   <label>Bedrag <span style="color:red;">*</span><br> 
       <span class="rfmp_currency_624">€</span> 
       <input type="number" step="any" value="" onchange="mollie_forms_624_totals();" name="rfmp_amount_624"> 
   </label> 
   <input type="hidden" id="rfmp_open_amount_required_624" value="0">
</p>

The both work separately, but when I add the second code (for the characters), the first one stops working properly. The li still gets active when clicked, but the hidden input field isn't showing up anymore. So something goes wrong.

Anybody that knows what I'm doing wrong?

Thanks in advance!

Answer 1

Tried to solve your problem by this fiddle(reformatting some HTML), But won't understand your character part. Hope it solve your problem.

 $( document ).ready(function() { var li_grp = $(".donate-box ul li") li_grp.text(function (i,t) { return t.slice(1, -1); }); li_grp.each(function() { var $th = $(this); $th.text( $th.text().substr(0) ); }); li_grp.click(function(){ //alert('ss') if (!$(this).hasClass("active")) { $(".donate-box ul li.active").removeClass("active"); $(this).addClass("active"); } if($(this).hasClass('popup-hidden')){ $('#rfmp_open_amount_624').show() }else{ $('#rfmp_open_amount_624').hide() } }); });

 .active{color:red}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="donate-box"> <ul id="form_624_field_2" label="" class="" required=""> <li>€ 5,00</li> <li>€ 10,00</li> <li>€ 15,00</li> <li class="popup-hidden">Anders </li> </ul> </div> <p id="rfmp_open_amount_624" style="display:none;"> <label>Bedrag <span style="color:red;">*</span><br> <span class="rfmp_currency_624">€</span> <input type="number" step="any" value="" onchange="mollie_forms_624_totals();" name="rfmp_amount_624"> </label> <input type="hidden" id="rfmp_open_amount_required_624" value="0"> </p>