2

I have the following function which adds dymaic fields upon button click

It is working fine,

all i want is to replace the number which is count with the data attribute value because data attribute has the icon and the name

function addNewField() {
    count = totalFields() + 1;
    field = $("#dynamic-field-1").clone();
    field.attr("id", "dynamic-field-" + count);
    field.children("label").text("Handler " + count); // it shows as Handler1, Handler2 
    field.find("input").val("");
    $(className + ":last").after($(field));

    followers = $("#dynamic-followers-1").clone();
    followers.attr("id", "dynamic-followers-" + count);
    followers.children("label").text("Number of Followers ");
    followers.find("input").val("");
    $(className + ":last").after($(followers));
  }

I want this to be Handler (Twitter + Icon) // twitter and icon are part of the data attribute because the values come from database

HTML

<div id="dynamic-field-1" class="form-group col-md-6 dynamic-field" data-name="twitter" data-icon='<i class="fab fa-twitter"></i>'>
  <label for="field" class="font-weight-bold">Handler</label>
  <input type="text" id="field" class="form-control" name="field[]" />
</div>
<div id="dynamic-followers-1" class="form-group col-md-6 dynamic-field">
  <label for="field" class="font-weight-bold">Number of Followers</label>
  <input type="text" id="fieldfollowers" class="form-control" name="fieldfollowers[]" />
</div>
Neil
  • 23
  • 3
  • Hey Neil, welcome to StackOverflow! I've read your question few times but unfortunately is not too clear and I'm getting lost, because your dataset is not present. However I did some research inside Stackoverflow and found not exactly but some how a close answer here: still not sure if it helps or not, but let's hope it will :) otherwise just leave a comment! please check this link: https://stackoverflow.com/questions/33760520/how-can-i-get-the-values-of-data-attributes-in-javascript-code – Ali.Ghodrat Feb 13 '21 at 20:20
  • i managed to somehow work, here is my pastebin...https://pastebin.com/qvjTuSda – Neil Feb 13 '21 at 22:02
  • this is html pastebin https://pastebin.com/80VqymRt . The issue is the followers are coming after the field, but i want to show the field and follower and then another field and follower – Neil Feb 13 '21 at 22:04
  • seems like i need some kind of swapping plugin to swap html positions to appear field/followers and then so on – Neil Feb 13 '21 at 22:07
  • Sounds like HTML problem and rearranging the elements, I've made a pastebin here: https://pastebin.com/i0edDzpZ Please confirm if it fixes the problem?! – Ali.Ghodrat Feb 13 '21 at 22:34
  • 1
    that is not solving the issue, i can do that too, but they has to be done through jquery, not html – Neil Feb 13 '21 at 23:34
  • beause html is being generated with jquery, not manually – Neil Feb 13 '21 at 23:35
  • Ok, then problem is about appearance and not functionality! right? – Ali.Ghodrat Feb 13 '21 at 23:38
  • How about rearranging that functionality if it is auto generated, it generates it line by line that's why you're getting that output! – Ali.Ghodrat Feb 13 '21 at 23:43
  • Ok this is my last comment before I go to bed, I edited your JavaScript pastebin: https://pastebin.com/GVV5zTKm But just in case, remember that you need to use html to show the functionality, and it doesn't matter how you processing the code! Good luck – Ali.Ghodrat Feb 13 '21 at 23:54

0 Answers0