Question

OK so this may be a little complex so bear with me.

I have a block of HTML with several hidden fields in it that have coordinates:

    <div id="content">
<div class="event">
    Blah blah blah
    <input id="e1coords" class="coords" name="e1coords" type="hidden" value="-27.482359,153.024725" />
</div>

<div class="event">
    blah blah blah
    <input id="e2coords" class="coords" name="e2coords" type="hidden" value="-27.471134,153.0182" />
</div>
<div class="event">
    blah blah blah
    <input id="e3coords" class="coords" name="e3coords" type="hidden" value="-27.471667,153.023704" />
</div>
    </div>

I have some code thats supposed to take the value from each hidden input (coordinates) and transfer it into part of the href url. EG:

   //GET COORDS
            $(content).find('.coords').each(function() {
                var coords = $(this).val();

                //CREATE BUTTON, ADD VALUE FROM
                var input2 = '<div class="inputholder"><a class="viewmap" href="maptest.html?longlat='+ coords +' "><button>Find on Map</button></a></div>';
                //ATTACH BUTTON
                $(input2).insertAfter($('#showday1 .save_event'));
            });  

This works OK to a point. It creates a button for each input (so in the example above 3 buttons are created) but dislpays them 3 times each. So from the HTML above I get 9 buttons where there should be 3.

Can any one suggest a way to display the button just once per hidden input?

Answer 1

If you want your generated buttons to be placed right after each hidden input HTML field (based on your input) I’d go like:

$(document).ready(function() {
           $(content).find('.coords').each(function() { 
                var coords = $(this).val(); 
                var input2 = '<div class="inputholder"><a class="viewmap" href="maptest.html?longlat='+ coords +' "><button>Find on Map</button></a></div>'; 
                $(this).after(input2);
            });   
});

As you have already detected the inputs (with class coords) the after jQuery function should append the desired content right after each of the hidden inputs

---

On the other hand if you just want all the buttons to be placed on the end of the div with id=content:

$(document).ready(function() {
           var input2="";
           $(content).find('.coords').each(function() { 
                var coords = $(this).val(); 
                input2 += '<div class="inputholder"><a class="viewmap" href="maptest.html?longlat='+ coords +' "><button>Find on Map</button></a></div>'; 
            }); 
            $(content).after(input2);
});

In this approach we aggregated all of the generated inputs (for each hidden input) and in the end we appended them to the wrapper div