Access Dynamic Id in Js

Access dynamic id in js

Why don't you append to the class instead and that way you wont have a flaky selector on a dynamic id. It is generally not a good idea to use a selector that will change.

<div class="row text-drag-cls"  id='textdrag{{$index}}'>

$(".text-drag-cls").contextmenu(function (event) {  
    setcontextposition("text");
 });

Hope that helps

How to access dynamically generated id of my HTML file in CSS and JS file associated to it

Expanding on @charlietfl comment.

First of all lets make a common class called each-card. And, give style to active-class. active-class will be added to the clicked element.

Js part taken from here

function changeActive(elem) {
  for (var i = 0; i < elem.length; i++) {
    elem[i].addEventListener("click", function(e) {
      var current = this;
      for (var i = 0; i < elem.length; i++) {
        if (current != elem[i]) {
          elem[i].classList.remove('active-card');
        } else if (current.classList.contains('active') === true) {
          current.classList.remove('active-card');
        } else {
          current.classList.add('active-card')
        }
      }
      e.preventDefault();
    });
  };
}
changeActive(document.querySelectorAll('.each-card'));

.active-card {
    background: teal;
}

<div class="row">
  <div class="each-card col-sm-3 offset-sm-1 col-12" data-id="2">
    <div class="row">
      <div class="col-12">
        <img src="img" alt="Title" class="img-fluid">
      </div>
      <div class="col-12">
        <h3>{{ blog.tittle }}1</h3>
        <p class="d-none" id="card-body">
          <h6>{{ blog.description }}</h6>
        </p>
        <a href="" type="submit" role="button" class="btn btn-info">Read more</a> 
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="each-card col-sm-3 offset-sm-1 col-12" data-id="2">
    <div class="row">
      <div class="col-12">
        <img src="img" alt="Title" class="img-fluid">
      </div>
      <div class="col-12">
        <h3>{{ blog.tittle }}</h3>
        <p class="d-none" id="card-body">
          <h6>{{ blog.description }}</h6>
        </p>
        <a href="" type="submit" role="button" class="btn btn-info">Read more</a> 
      </div>
    </div>
  </div>
</div>

How to access and use a dynamically created html element with IDs in the DOM using Javascript

A couple of changes:

You need to pass a parameter to the del() function. In this
case, I modified your code to pass the click event. I then check the id of the clicked element in your if/else blocks.
.strike() is a String function, but you are applying it to a DOM element. You need to grab the DOM text, apply .strike() to it, and set the innerHTML value to it.
get is a keyword in javascript, I changed it to get1.

<body><div>    <h1>        <span id="cls">3</span> To-DOs</h1>    <input type="text" value="Enter A To-Do" id="input001" onclick="this.select()" onmouseout="this.style.transition = 0.5 + 's';"    />    <br />    <br />    <input type="button" value="Insert" id="button" onmouseout="document.getElementById('button').style.transition = 0.5 + 's';"     onclick="send()"></div><div>    <fieldset>        <legend>Your To-Do(s)</legend>        <p id="import"> </p>    </fieldset></div><script type="text/javascript">    var get1 = document.getElementById('import');    var no = 0;    var click = 0;    var input;    var count = new Array("one", "two", "three");    var count2 = new Array('a', 'b', 'c');    var me = 0;
    document.getElementById('input001').addEventListener('keypress', function (e) {        // Enter Key Listener for the input box!        var key = e.which || e.keyCode;        if (key == 13) {            e.preventDefault();            send();        }    })
    function send() {        input = input001.value;
        if ((input == "Enter A To-Do") || (input == "")) {            Alert.render("No To-Do Is Set!");        } else if ((input != "Enter A To-Do") || (input != "")) {            if (no <= 2) {                click++;                no++;
                var element = document.createElement('span');                element.innerHTML = no + "  ." + input + "        ";                element.id = count[me];
                var btnOne = document.createElement('button');                btnOne.innerHTML = 'x';                btnOne.id = count2[me];                btnOne.setAttribute("onclick", "del(event)");
                window.elementTwo = element;                window.btnTwo = btnOne;
                get1.appendChild(elementTwo);                get1.appendChild(btnTwo);
                get1.innerHTML += "<br />" + "<br />";                input001.value = "";                me++;            } else if (no == 3) {                Alert.render("Your 'To-Do Activity' input Limit On Your List Is Reached!" + "<br />" + "You Can't Add More! :(");            }        }    }
    function del(ev) {              if(ev.target.id == 'a'){
          document.getElementById('one').innerHTML = document.getElementById('one').innerText.strike(); 
         }else if(ev.target.id == 'b'){
           document.getElementById('two').innerHTML = document.getElementById('two').innerText.strike();
    }else if(ev.target.id == 'c'){
           document.getElementById('three').innerHTML = document.getElementById('three').innerText.strike();;    }}   
</script></body></html>

How to get the ID of a dynamic element when clicked?

If you are using jQuery this should make you happy:

// delegate click event to all button elements in #theForm;
// will also apply for buttons added in future
$('#theForm').on('click', 'button', function(e) {
   alert(e.target.id);
});

if not, attach this to each button:

blablabla.onclick = function(event){
    alert(event.currentTarget.id);
}

How to access dynamic id tag with jquery

In your .insideForm object you only have one .spots classed paragraph.

Try using the jQuery selector inside the form:

$('.insideForm').submit(function () {
    var form = $(this).closest('form');

    $.ajax({
        url: form.attr('action'),
        type: 'POST',
        data: form.serialize(),

        success: function (response) {
            $('.spots', form).html(response);
        }//end success

    });
    return false;
});

How do I get a dynamically created ID?

Your problem is that id is unique and can only be assigned once to a element, like so:

<p id="paragraph"> This is legal </p>
<p id="paragraph"> This is illegal - It is no longer unique </p>

<p class="paragraph"> This is legal </p>
<p class="paragraph"> This is legal </p>

You can access the currently clicked class by using $(this) like so:

$('.paragraph').click(function() {
    $(this).html('See, totally legal.');
});

See this example to see this in use.

Your solution needs to add an onclick() method to a button. This then gets the parent() form. You can then find() the class and get the val() from the form data.

Your form was also submitting the action. You need to have a <button> of type button so it does not submit the action. This must also be a class since it will not be unique if you're multiply creating them.

Here is a working example to just re-add your AJAX request too.

$(document).ready(function() {  $('.submit-btn').click(function() {    var elements = {      'userid': $(this).parent().find('.userid').val(),      'productid': $(this).parent().find('.productid').val(),      'collection': $(this).parent().find('.collection').val(),      'wish': $(this).parent().find('.wish').val()    };
    console.log("User ID: " + elements.userid);    console.log("Product ID: " + elements.productid);    console.log("Collection: " + elements.collection);    console.log("Wish: " + elements.wish);
    // TODO: Add your AJAX request using these elements  });});

button {  background: #0084ff;  border: none;  border-radius: 5px;  padding: 8px 14px;  font-size: 15px;  color: #fff;  cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This will be generated by PHP -->
<form method='POST'>  <input hidden class="userid input-box" value="1">  <input hidden class="productid input-box" value="1">  <input hidden class="collection input-box" value="1">  <input hidden class="wish input-box" value="1">  <button type="button" class="submit-btn btn my-2 my-sm-0 btn-outline-dark btn-sm"> Add to collection </button></form>
<!-- This will be generated by PHP --><br />
<form method='POST'>  <input hidden class="userid input-box" value="2">  <input hidden class="productid input-box" value="2">  <input hidden class="collection input-box" value="2">  <input hidden class="wish input-box" value="2">  <button type="button" class="submit-btn btn my-2 my-sm-0 btn-outline-dark btn-sm"> Add to collection </button></form>

Access Dynamic Id in Js