CODEWITHSUNDEEP
javascripthtmlyii2
MaRKR
MaRKR

Reputation: 47

how to increase button id when button clicks

I have a button, when click the button i need to increase the button id This is my button

 <input type="button" id="repeataddon-1" name="repeataddon"
 class="repeataddon" value="add" >

and the script as

 $(document).on( "click",'.repeataddon',function( ) {
                     hoteladdons();
                     alert(this.id);
                 });

can i use this code for my other table attributes which i want to increase their id as the same 

<table width="100%" class="book-table" >
    <tr>
        <th>Addon Name</th>
        <th>No of Addons</th>
        <th>Rate</th>
        <th>Addon Amount</th>

    </tr>
    <tr>
        <td>
            <article>
                <span>

          <?php echo $hoteladdon; ?>

              </span>
            </article>
        </td>
        <td>
            <article>
                             <span>
                    <select class="noofaddons" name="noofaddons" id="noofaddons-1">
                        <?php
                        for($i=0;$i<5;$i++){


                            echo "<option value='$i'>".$i."</option>";

                        }
                        ?>
                    </select>
                        </span>
            </article>
        </td>
        <td><label id="addonprice-msg-1"></label> </td>
        <td><label id="addontotal-msg-1"></label></td>

    </tr>
</table>

Upvotes: 0

Views: 130

Answers (2)

Ahs N
Ahs N

Reputation: 8366

Here is what I did:

$(document).on("click", '.repeataddon, .noofaddons, .addonprice-msg, .addontotal-msg', function () {
     var sp = $(this).attr('id').split("-");

     if (isNaN(sp[sp.length - 1]) == false) {
         $(this).attr('id', $(this).attr('id').split("-").slice(0, $(this).attr('id').split("-").length - 1).join("-") + '-' + (parseInt($(this).attr('id').split("-")[$(this).attr('id').split("-").length - 1]) + 1));
     } else {
         $(this).attr('id', $(this).attr('id') + '-1');
     }
 });

Here is the JSFiddle demo

Inspect element to see the change while you click on the button

Upvotes: 0

iplus26
iplus26

Reputation: 2637

Just like below

$(document).ready(function() {
  $('.repeataddon').click(function() {
    // hoteladdons();
    var temp = $(this).attr('id').split('-');
    $(this).attr('id', temp[0] + '-' + (parseInt(temp[1]) + 1));
    console.log($(this).attr('id'));
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="repeataddon-1" name="repeataddon" class="repeataddon" value="add">

Upvotes: 2

Related Questions