How can I combine 60 similar jquery functions into a single function?

Question

I have a page which is essentially a giant checklist. If you hit the button to edit a checklist item, a modal pops up. On this modal, is a radio to select if problems were detected or not during the check. If yes is selected, a hidden div is displayed so that more information can be inserted before submitting.

Here is an example modal, currently, there are 60 on the page.

<!-- modal window for submiting check-->
                <div id="edit3" class="text-left g-max-width-800 g-bg-white g-overflow-y-auto g-pa-20" style="display: none;">
                  <button type="button" class="close" onclick="Custombox.modal.close();"><i class="hs-icon hs-icon-close"></i></button>
                  <h4 class="g-mb-20">Update Record for Empirix->SIP:500 Baseline</h4>
                  <form action="actions.php" method="POST">
                    <!-- Checkbox -->
                    <div class="g-mb-15">
                      <label class="form-check-inline u-check g-pl-25 ml-0 g-mr-25">
                        <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="0" checked="">
                        <div class="u-check-icon-radio-v4 g-absolute-centered--y g-left-0 g-width-18 g-height-18">
                          <i class="g-absolute-centered d-block g-width-10 g-height-10 g-bg-primary--checked"></i>
                        </div>
                        No Issues
                      </label>                 
                      <label class="form-check-inline u-check g-pl-25 ml-0 g-mr-25">
                        <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="1">
                        <div class="u-check-icon-radio-v4 g-absolute-centered--y g-left-0 g-width-18 g-height-18">
                          <i class="g-absolute-centered d-block g-width-10 g-height-10 g-bg-primary--checked"></i>
                        </div>
                        Issue Found
                      </label>
                    </div> 
                    <input type="hidden" name="action" value="subcheck">                        
                    <input type="hidden" name="id" value="3">                        
                    <div id="ifYes3" class="g-mb-15 desc3" style="display:none">
                      <div class="form-group g-mb-20">
                        <label class="g-mb-10" for="inputGroup1_1">INC Ticket</label>
                        <input id="inputGroup1_1" class="form-control form-control-md rounded-0" type="text" placeholder="INC Ticket #" name="inc_tick">
                      </div>
                      <div class="form-group g-mb-20">
                          <label class="g-mb-10" for="inputGroup2_1">Brief Description</label>
                          <textarea id="inputGroup2_1" class="form-control form-control-md g-resize-none rounded-0" rows="3" name="problem" placeholder="If you found an issue, please provide a short overview."></textarea>
                      </div>                         
                    </div>
                    <div align="right">
                      <button type="submit" class="btn u-btn-primary g-mr-20 g-mb-1">Submit</button>
                    </div>
                  </form>

                </div>
                <!-- End modal window -->     

Then, I have this ajax code to perform the refresh, you'll notice I have a jq toggle for each of the 60 div's in here.

         var interval = 10000;   //number of mili seconds between each call
var refresh = function() {
    $.ajax({
        url: "ops_controller.php",
        cache: false,
        success: function(html) {

$("[name=issue1]").click(function(){
        $('.desc1').toggle();
        $("#ifYes1-"+$(this).val()).show('slow');
});
<!-- Cut out 58 similar functions --> 
$("[name=issue59]").click(function(){
        $('.desc59').toggle();
        $("#ifYes59-"+$(this).val()).show('slow');
});

$("[name=issue60]").click(function(){
        $('.desc60').toggle();
        $("#ifYes60-"+$(this).val()).show('slow');
});

            $('#table-refresh').html(html);
            setTimeout(function() {
                refresh();
            }, interval);
        }
    });
};
refresh();

I then have the same code (60 jq functions) in another function

   $( document ).ajaxStop(function() {

                   $.HSCore.components.HSModalWindow.init('[data-modal-target]');
                   $.HSCore.components.HSPopup.init('.js-fancybox', {
                       btnTpl: {
                          smallBtn: '<button data-fancybox-close class="btn g-pos-abs g-top-25 g-right-30 g-line-height-1 g-bg-transparent g-font-size-16 g-color-gray-light-v3 g-brd-none p-0" title=""><i class="hs-admin-close"></i></button>'
                       }

                   });
                   $('[data-toggle="tooltip-show"]').tooltip('show');

$("[name=issue1]").click(function(){
        $('.desc1').toggle();
        $("#ifYes1-"+$(this).val()).show('slow');
});

<!-- cut out 58 other items -->    
$("[name=issue59]").click(function(){
        $('.desc59').toggle();
        $("#ifYes59-"+$(this).val()).show('slow');
});

$("[name=issue60]").click(function(){
        $('.desc60').toggle();
        $("#ifYes60-"+$(this).val()).show('slow');
});

   });      


});

The reason I've done it like this is so that this toggle will work on load and on ajax page refresh every 10 seconds. Im very new to jQuery/AJAX so forgive my ignorance. After two days, this is what I came up with to make it still work after the page refresh.

Surely, there has to be a cleaner method than what I'm doing here.

Answer 1

You can use a generic function in combination with event delegation¹ - see example below:

// [name^=issue] will target elements whose [name] attributes begins with "issue"
$(document).on("click", "[name^=issue]", function() {
    var issueNo = this.name.replace("issue", "");

    $(".desc" + issueNo).toggle();

    $("#ifYes" + issueNo + "-" + $(this).val()).show("slow");
})

---

¹ https://learn.jquery.com/events/event-delegation/

Answer 2

You could set a data attribute in the HTML for each of the items you are wrapping - essentially you need a way to get the current ID for each then build up your jquery selector from that.

<div class="myrow" data-rowID="1">
   <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue1" type="radio" value="1">
</div>
<div class="myrow" data-rowID="2">
  <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue2" type="radio" value="1">
</div>
<div class="myrow" data-rowID="3">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="1">
</div>



$(".myrow input[type=radio]").click(function(){
       // ok what number is this row?
       var myRowID = $(this).attr('data-rowID');

       $('.desc'+ myRowID ).toggle();
       $("#ifYes" + myRowID + "-"+$(this).val()).show('slow');
});

Something like that.