Change div id within a div using jQuery

Question

I was able to successfully clone and remove certain part of my form thanks to David Carr - Duplicate form sections with jQuery

Now I have been trying to change two div ids (#ifYes & #ifNo) which are hidden to provide them with a unique id every time the form is cloned, I have added two line of coding to change the div ids which doesn't really work.

My code is as follows:

HTML:

<div id="content">
  <button type="button" id="cross" class="buttonImgTop cross"></button>
   <div id="ValuWrapper">
      <div id="ifYes"> .. </div>
      <div id="ifNo">  .. </div>
   </div>
</div>

<button type="button" class="buttonImg" id="repeat"></button>

JavaScript:

//define template
var template = $('#content:first').clone();


//define counter
var count = 0;

//add new section
$('body').on('click', '#repeat', function() {

//increment
count++;

//remove cross button div
template.clone().find('cross').removeAttr("#cross");

//update id of ifYes & ifNo
template.clone().find('#ifYes').attr("id", "#ifYes"+count);
template.clone().find('#ifNo').attr("id", "#ifNo"+count);

//loop through each input
var inputSection = template.clone().find(':input').each(function(){

    //set id to store the updated section number
    var newId = this.id + count;

    //update id
    this.id = newId;

}).end()

//inject new section with animation
.appendTo('#content').hide()
.appendTo('#content').slideDown(500)
return false;
});

//remove section
$('#content').on('click', '.cross', function() {
//slide up section
$(this).parent().slideUp(500, function(){
    //remove parent element (main section)
    $(this).parent().child().empty();
    return false;
});
return false;
});

Appreciate your assistance.

Rakib · Accepted Answer · 2017-08-29T15:50:14.547

Here is the fiddle: https://jsfiddle.net/zh7wejzb/

Here is the working example. Please have a look:

    <!DOCTYPE html>
<html>

<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <meta charset="utf-8">
    <title>Test</title>
    <meta name="description" content="Fullscreen backgrounds with centered content">
</head>

<body>
    <div id="content">
        <button type="button" class="buttonImgTop cross">Cross</button>
        <div id="ValuWrapper">
            <div id="ifYes" class="yes"> .. </div>
            <div id="ifNo" class="no"> .. </div>
        </div>
    </div>
    <button type="button" class="buttonImg" id="repeat">Repeat</button>
    <script type="text/javascript">
    //define template
    var template = $('#content:first');


    //define counter
    var count = 0;

    //add new section
    $('body').on('click', '#repeat', function() {

        //increment
        count++;

        //remove cross button div
        var clone = template.clone()
            .appendTo('#content').hide()
            .slideDown(500);

        //update id of ifYes & ifNo
        clone.find('.yes').prop("id", "ifYes" + count);
        clone.find('.no').prop("id", "ifNo" + count);

        //loop through each input
        clone.find(':input').each(function() {

            //set id to store the updated section number
            var newId = this.id + count;

            //update id
            this.id = newId;

        }).end()


        return false;
    });

    //remove section
    $('#content').on('click', '.cross', function() {
        //slide up section
        $(this).parent().slideUp(500, function() {
            //remove parent element (main section)
            $(this).empty();
            return false;
        });
        return false;
    });
    </script>
</body>

</html>

Hello, thank you. It works but the cloning is happening for all the available fields. Needs tweaking I guess to have that fixed, which I did and hope you don't mind. Thank you very much. — Mazin Al-Bahrani, Aug 29 '17 at 13:31
Just one thing, aren't you cloning the template 2 times? Also your code doesn't change the id for yes and no button. — Rakib, Aug 29 '17 at 15:48
I am cloning the form only once with every press of the button 'repeat' and by doing so I expect all the div ids to change accordingly in an ascending order. With the code that I edited, I got the ids `ifYes` and `ifNo` changing, in my live code anyway. I just tested on the fiddle and it seems you are correct. No idea why but at least I got it working thanks to your code. — Mazin Al-Bahrani, Aug 29 '17 at 18:47

score 0 · Answer 2 · edited Sep 20 '17 at 20:20

0

<html>
  <head>
    <title>Change Html Div ID Using jQuery</title>
 </head>
 <body>
    <div id="ChangeID"></div>
</html>

<script src="jQuery CDN"></script>
$(document).ready(function(){        
$('#ChangeID').attr('id', 'NewID')      
});
 <script>   

</body>
</html>

edited Sep 20 '17 at 20:20

marc_s

732,580
175
1,330
1,459

answered Aug 28 '17 at 18:14

Mohhamad Hasham

1,750
1
15
18

Thank you for your response but that works if I am not cloning the form. When I clone, the code becomes ineffective. Try using the code shown above to provide unique ids every time the 'Clone' button is pressed. (In my code, it is the button with the `repeat` id) – Mazin Al-Bahrani Aug 28 '17 at 18:20
you can use a random number generator and add the generated number here `$('#ChangeID').attr('id', 'NewID')` – Mohhamad Hasham Aug 28 '17 at 18:26

score 0 · Answer 3 · answered Aug 28 '17 at 18:20

0

I have to do this sort of thing often. What I do is probably not ideal but it works. I do something like this...

function getRandomInt(000000, 999999) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var uniqueScriptID = “anythingStartingLowercase” + getRandomInt();

and then concatenate the entire script into a variable, but where the ID is written literally in the script, replace it with the uniqueScriptID variable.

You can then use that variable to throw out as many of those forms as you like, all with unique ID’s.

Hope that helps. That code is NOT tested at all.

answered Aug 28 '17 at 18:20

Thank you for your response. However, I will need to change the div id when the 'cloning' happens, not anytime before it. – Mazin Al-Bahrani Aug 28 '17 at 18:22
You can generate that html at the same time you generate the form using the same prefixed (with a lowercase letter )random number method. Just a thought. – Aug 28 '17 at 18:24

Change div id within a div using jQuery

3 Answers3