How to change multiple populated checkbox input field values?

I was looking for solution, how to change multiple populated checkbox - input field values with javascript help. How to change values yes to no and no to yes if checkbox checked. Here is the part of code I use:

html form:

<form method="post" action="" autocomplete="off" id="form">

            <p class="lable_2">Select place</p>
            <span class="boxx dothetrick" id="df3">
                <select data-skip-name="true" name="pl[]">
                    <option value="">select place</option>
                    <option value="Berlin">Berlin</option>
                    <option value="London">London</option>
                    <option value="Barcelona">Barcelona</option>
                </select> 
                <label for="">Date: </label><input type="date" name="pl[]" value="iesndat">
                <label for="">Yes/No: </label><input type="checkbox" name="pl[]" id="trick" value="no">
                <button type="button" name="add3" id="add3" class="btn btn-success">+</button>
            </span>

</form>

javascript:

<script>
        $(document).ready(function(){ 
             
            $('.dothetrick input[type="checkbox"]').change(function() {
            if ($(this).is(":checked")) {
                document.getElementById("trick").value = "yes";
            } else
                document.getElementById("trick").value = "no";
            });

            var i = 1;
            $('#add3').click(function(){
                i++;
                $('#df3').append('<span id="row'+i+'"><br><select data-skip-name="true" name="pl[]"><option value="">select place</option><option value="Berlin">Berlin</option><option value="London">London</option><option value="Barcelona">Barcelona</option></select> <label>Date: </label><input type="date" name="pl[]" value="iesndat"><label> Yes/No: </label><input type="checkbox" name="pl[]" id="trick'+i+'" value="no"> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove3">-</button></span>');
            });

            $(document).on('click','.btn_remove3', function(){
                var button_id = $(this).attr("id");
                $("#row"+button_id+"").remove();
            });

        });
    </script>

this part is working perfectly:

$('.dothetrick input[type="checkbox"]').change(function() {
                if ($(this).is(":checked")) {
                    document.getElementById("trick").value = "yes";
                } else
                    document.getElementById("trick").value = "no";
                });

but how to make to work this part of js code wich make populated checkbox values change value to no to yes and yes to no:

var i = 1;
                $('#add3').click(function(){
                    i++;
                    $('#df3').append('<span id="row'+i+'"><br><select data-skip-name="true" name="pl[]"><option value="">select place</option><option value="Berlin">Berlin</option><option value="London">London</option><option value="Barcelona">Barcelona</option></select> <label>Date: </label><input type="date" name="pl[]" value="iesndat"><label> Yes/No: </label><input type="checkbox" name="pl[]" id="trick'+i+'" value="no"> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove3">-</button></span>');
                });

The idea is something like this:

var i = 1;
$('#row'+i).change(function() {
            if ($(this).is(":checked")) {
                i++;
                document.getElementById("trick"+i).value = "yes";
               
            } else
            i++;
                document.getElementById("trick"+i).value = "no";
               
});

checkbox checked not changing no to yes value in new populated rows:

Can't find answers by myself. I hope the idea is clear and someone can help me with this!