Question

I have asked this question earlier, please click here!

this is extension to the question

This is my jQuery

<script>
$(document).ready(function () {
    $('#TextBox2').blur(function () {
        var objVal = $(this).val();
        if (objVal != '') {
            $('h3 a[class="Anchor2"]').text(objVal);
        }
        else {
            $('h3 a[class="Anchor2"]').text("Default Text")
        }
    });
});

My Markup

<a href="#" class="Anchor2">Default Link Text</a>
<input type="text" size="50" name="Medication2" id="Medication2">

This work fine for the first set of Anchor Link and Text Box

But in my page there is button, when click it will add more sets of Anchor link and Text Box with Unique ID

TextBox1, TextBox2, TextBox3 ....
Anchor1, Anchor2, Anchor3 ..... respectively.

How can I make my Script so work only for specific set.

Like When i have blur event for TextBox3 only Anchor 3 should get affected.

And this should be independent of each set.

Answer 1

String manipulation:

$(document).ready(function () {
    $('#TextBox2').blur(function () {
        // num will hold the 'number' in the id: 2
        var num = $(this).attr('id').replace("TextBox", "");
        var objVal = $(this).val();
        if (objVal != '') {
            $('h3 a[class="Anchor'+num+'"]').text(objVal);
        }
        else {
            $('h3 a[class="Anchor'+num+'"]').text("Default Text");
        }
    });
});