Creating Multiple jQuery Selectors

Question

So like other questions on here mine is a small bit different. I was on a few months break of coding so my mind has been melted. Could anyone help?

So I have multiple tags with the ID: #Feedback{1,2,3,4 e.t.c} The numbers at the end go on forever. I need to use 1 block of code to be able to execute Jquery on. The thing is, The reason I need this is because I have a custom Attribute Tag called "game", Where I use PHP to apply different Game Titles into this attribute tag for each of the Feedback tags. Example: #Feedback1's game="minecraft" #Feedback2's game="destiny" e.t.c.

I have this as I need to apply each of the different feedback tags' game to a Ajax form. But how? This is something thats pretty hard to explain.

Code im trying to do this on:

$('#Feedback').confirm({

    theme: 'supervan',
    title: 'Feedback',
    content: '<form id="FeedbackForm"><input name="feedback" type="text" class="form-control" style="color: #000;"><input name="username" value="<?= $_SESSION['username']; ?>" hidden><input name="game" value="{GAME TITLE HERE}" hidden></form><span class="help-block m-b-none" style="color: #fff;">If you have issues use the Report Issue button.</span>',
    confirm: function(){

        $.ajax({

            //Options
            type: "POST",
            url: "feedback.php",
            data: $("#FeedbackForm").serialize(),

            //If it posted Successfully, Alert the user;
            success: function(data) { $.alert('Feedback Saved!'); },
            error: function() { $.alert('Oh No! An Error!'); }

        });
    }

});

feedback.php:

<?php

file_put_contents('t.txt', $_POST['feedback'].$_POST['username'].$_POST['game']);

?>

The Feedback Tags/Buttons:

<th>
    <a id="Feedback1" game="{PHP For a Game Title}" style="height: 100%;">
        <div class="col-sm-12 center" style="background-color: #1AB394;">
            <h1 style="font-size: inherit; color: #fff; margin-bottom: 5px;">Write Feedback</h1>
        </div>
    </a>
</th>

<th>
    <a id="Feedback2" game="{PHP For a DIFFERENT Game Title}" style="height: 100%;">
        <div class="col-sm-12 center" style="background-color: #1AB394;">
            <h1 style="font-size: inherit; color: #fff; margin-bottom: 5px;">Write Feedback</h1>
        </div>
    </a>
</th>

EDIT: Ok so it seems doing Feedback{Numbers} isnt needed as the $('[class^=Feedback]').on('click', function() { works fine (I moved from id to class).

But when I click it once nothing happens click it again it opens 1 time click it again it opens 2 times 1 click, click again and it opens 3-4 times in one click its rlly strange.

Current Code:

//Feedback Button
$('[class^=Feedback]').on('click', function() {

    $(this).confirm({

        theme: 'supervan',
        title: 'Feedback',
        content: '<form id="FeedbackForm"><input name="feedback" type="text" class="form-control" style="color: #000;"><input name="username" value="<?= $_SESSION['username']; ?>" hidden><input name="game" value="' + $(this).data('game') + '" hidden></form><span class="help-block m-b-none" style="color: #fff;">If you have issues use the Report Issue button.</span>',

        confirm: function(){

            $.ajax({

                //Options
                type: "POST",
                url: "feedback.php",
                data: $("#FeedbackForm").serialize(),

                //If it posted Successfully, Alert the user;
                success: function(data) { $.alert('Feedback Saved!'); },
                error: function() { $.alert('Oh No! An Error!'); }

            });

        }

    });

});

Answer 1

You can do it like this: in the game variable will be stored current clicked game attribute

$('[id^=Feedback]').click(function() {

  var game = $(this).attr('game');
 // $.confirm({
   // theme: 'supervan',
   //  title: 'Feedback',
   //...more code
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<th>
  <a id="Feedback1" game="{PHP For a Game Title}" style="height: 100%;">
    <div class="col-sm-12 center" style="background-color: #1AB394;">
      <h1 style="font-size: inherit; color: #fff; margin-bottom: 5px;">Write Feedback</h1>
    </div>
  </a>
</th>

<th>
  <a id="Feedback2" game="{PHP For a DIFFERENT Game Title}" style="height: 100%;">
    <div class="col-sm-12 center" style="background-color: #1AB394;">
      <h1 style="font-size: inherit; color: #fff; margin-bottom: 5px;">Write Feedback</h1>
    </div>
  </a>
</th>

Answer 2

Personally, I would use a class selector on the individual buttons rather than an ID, as it's easier to select with jQuery as one block, then I'd change your game attribute to be a data- attribute instead, which you can then access with jQuery.data.

You'd end up with something like this for the button HTML:

<th>
    <a id="Feedback1" class="feedback" data-game="{PHP For a Game Title}" style="height: 100%;">
        <div class="col-sm-12 center" style="background-color: #1AB394;">
            <h1 style="font-size: inherit; color: #fff; margin-bottom: 5px;">Write Feedback</h1>
        </div>
    </a>
</th>

<th>
    <a id="Feedback2" class="feedback" data-game="{PHP For a DIFFERENT Game Title}" style="height: 100%;">
        <div class="col-sm-12 center" style="background-color: #1AB394;">
            <h1 style="font-size: inherit; color: #fff; margin-bottom: 5px;">Write Feedback</h1>
        </div>
    </a>
</th>

and this for the jQuery:

$('.feedback').confirm({
    theme: 'supervan',
    title: 'Feedback',
    content: '<form id="FeedbackForm"><input name="feedback" type="text" class="form-control" style="color: #000;"><input name="username" value="<?= $_SESSION['username']; ?>" hidden><input name="game" value="' + $(this).data('game') + " hidden></form><span class="help-block m-b-none" style="color: #fff;">If you have issues use the Report Issue button.</span>',
    confirm: function(){

        $.ajax({

            //Options
            type: "POST",
            url: "feedback.php",
            data: $("#FeedbackForm").serialize(),

            //If it posted Successfully, Alert the user;
            success: function(data) { $.alert('Feedback Saved!'); },
            error: function() { $.alert('Oh No! An Error!'); }

        });
    }

});