[FIXED] jQuery - Add combinations to the string and repeat this for many input fields of a form

Issue

I have a form where I request a lot of data for a join table in cakePHP3.5 project. The string consists of combinations of factors A, B, C and D separated by space. For example: BD AC ABCD AD B CD. I found out how to compose this string for the one such field.

First I write a required combination to textbox Result, then use Add button to stitch them together.

How to repeat this for many without writing a long jQuery? Basically I need to repeat what is below 50 times, but I cannot find proper selectors for all these multiple checkboxes. Checkbox 1 down there is for illustrating purposes to emphasize that I will have different checkboxes and many such input fields.

This is my first jQuery, so please, be patient :)

$(document).ready(function() {
 
 $('.factor-checkbox').click(function() {
    var text = $('#result0');
    text.val('');
    $(".factor-checkbox:checked").each(function() {
    text.val(text.val() + $(this).val());
    });
    
   
  });
    $("#btn0").click(function(){
    var text1 = $('#combinations0');
    text1.val(text1.val() + ' ' + $('#result0').val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input type="checkbox" name="A" value="A" class="factor-checkbox">A</label>

<label><input type="checkbox" name="B" value="B" class="factor-checkbox">B</label>

<label><input type="checkbox" name="C" value="C" class="factor-checkbox">C</label>

<label><input type="checkbox" name="D" value="D" class="factor-checkbox">D</label>

<label for="result0">Result </label><input type="text" id="result0"/>

<button type="button" id="btn0">Add</button>

<div class="input checkbox"><label for="items-0-id"><input type="checkbox" name="items[0][id]" value="1" id="items-0-id">1</label></div>

<div class="input text"><label for="Combinations">Combinations</label><input type="text" id="combinations0"/></div>

Solution

I would suggest to:

• Wrap each repeating block (each with 4 checkboxes, ...etc) in a separate container element: that will facilitate to address the different elements that belong together.
• Don't use id attributes where not necessary: for labels you don't need them when you wrap the input inside the label element. Instead use class names. This will facilitate the generation of all the 50 blocks
• In each event handler determine the section the click happened in, and then use that as the scope of every other jQuery selection you do (by using the second argument of $() -- or .find().

Here is working snippet with two such blocks:

$(function() {
    function mapValues(elem) {
        return $(elem).val();
    }
    $(".factor-checkbox").click(function() {
        var $section = $(this).closest(".section");
        var $text = $(".result", $section);
        $text.val($.map($(".factor-checkbox:checked", $section), mapValues).join(""));
    });
    $(".add").click(function() {
        var $section = $(this).closest(".section");
        var $combi = $(".combinations", $section);
        $combi.val(($combi.val() + " " + $(".result", $section).val()).trim());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
    <label><input type="checkbox" name="A" value="A" class="factor-checkbox">A</label>
    <label><input type="checkbox" name="B" value="B" class="factor-checkbox">B</label>
    <label><input type="checkbox" name="C" value="C" class="factor-checkbox">C</label>
    <label><input type="checkbox" name="D" value="D" class="factor-checkbox">D</label>

    <label>Result <input type="text" class="result"></label>

    <button type="button" class="add">Add</button>
    
    <div class="input text">
        <label>Combinations <input type="text" class="combinations"></label>
    </div>
</div>
<div class="section">
    <label><input type="checkbox" name="A" value="A" class="factor-checkbox">A</label>
    <label><input type="checkbox" name="B" value="B" class="factor-checkbox">B</label>
    <label><input type="checkbox" name="C" value="C" class="factor-checkbox">C</label>
    <label><input type="checkbox" name="D" value="D" class="factor-checkbox">D</label>

    <label>Result <input type="text" class="result"></label>

    <button type="button" class="add">Add</button>

    <div class="input text">
        <label>Combinations <input type="text" class="combinations"></label>
    </div>

</div>

Answered By - trincot